怎么顯示網(wǎng)頁(yè)中的CSS樣式

按照你的問(wèn)題應(yīng)該是添加樣式后沒(méi)有反應(yīng)

成都創(chuàng)新互聯(lián)公司2013年至今，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元洪山做網(wǎng)站,已為上家服務(wù),為洪山各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

首頁(yè) 可以給你的html添加 行內(nèi)樣式：如p style="font-size:24px;"/p

其次可以在頁(yè)面中也如樣式如：

style

p{ font-size:24px}

/style

3.? 可以引入外部樣式：link href="style.css" rel="stylesheet" type="text/css" /?? 意思就是創(chuàng)建一個(gè) 名字叫style的CSS文件 并用 link標(biāo)簽引入

css樣式布局及rem用法梳理

視口（viewport）是用來(lái)約束網(wǎng)頁(yè)中最頂級(jí)塊元素的，即它決定了網(wǎng)頁(yè)的大小，網(wǎng)頁(yè)是先在視口上渲染，然后再通過(guò)視口放回到瀏覽器窗口上的，網(wǎng)頁(yè)的渲染過(guò)程如下：

pc端視口的大小和瀏覽器的大小一樣，所以網(wǎng)頁(yè)是1：1的放到瀏覽器窗口上，而移動(dòng)端視口就有點(diǎn)特殊，移動(dòng)端視口的寬度是比移動(dòng)端屏幕要寬，寬度尺寸一般是980px或者1024px，網(wǎng)頁(yè)是視口上渲染完之后，為了能在移動(dòng)端屏幕上顯示整個(gè)網(wǎng)頁(yè)，整個(gè)視口會(huì)整體縮放到屏幕的寬度，這樣，網(wǎng)頁(yè)看上去就整體縮放

具體如何設(shè)置視口以及禁止視口頁(yè)面縮放可以自行百度

（主要針對(duì)移動(dòng)端以及pc端網(wǎng)頁(yè)需要實(shí)現(xiàn)等比放大縮小頁(yè)面效果）

大概有以下幾種

1、流體布局

流體布局其實(shí)就是寬度用百分比，高度用固定值的布局方式，寬度通過(guò)百分比來(lái)適配不同寬度的屏幕。

為了適配手機(jī)端不同尺寸的屏幕，我們?cè)诙x元素寬度的時(shí)候可以寫(xiě)百分比，百分比是相對(duì)于屏幕的寬度，所有寬度就可以做到自適應(yīng)，而在高度方向，由于網(wǎng)頁(yè)的高度是不定的，所以我們可以把高度寫(xiě)成固定的值(px),這種布局方式叫做流體布局。

注意兩個(gè)概念

2、彈性盒模型布局flex

這種布局方式是通過(guò)css3新增的一些輔助布局的樣式屬性來(lái)制作布局的方式。

3、rem布局

rem是一種相對(duì)長(zhǎng)度單位，通過(guò)這個(gè)長(zhǎng)度單位可以實(shí)現(xiàn)元素寬高等比例縮放，從而完成不同寬度屏幕的適配。

4、響應(yīng)式布局 （媒體查詢(xún)）

通過(guò)樣式動(dòng)態(tài)查詢(xún)屏幕的寬度，動(dòng)態(tài)切換樣式來(lái)適配不同寬度屏幕的布局方式。

Bootstrap是最典型的一種

待補(bǔ)充

實(shí)際開(kāi)發(fā)中，pc端頁(yè)面需要實(shí)現(xiàn)響應(yīng)式等比縮放（即自適應(yīng)），使用rem+彈性布局是比較現(xiàn)實(shí)及理想的解決方式

移動(dòng)端可以使用rem布局，也可以使用px實(shí)現(xiàn)（主要用flex），具體看產(chǎn)品是怎么設(shè)計(jì)要求的

css3規(guī)定：1rem的大小就是根元素html的font-size的值。

rem其實(shí)是一個(gè)單位 ，是個(gè)相對(duì)單位 root em。rem就是root（根元素的大?。┫鄬?duì)于html元素的字體大小的單位。

rem布局的原理

就是根據(jù)一個(gè)html根元素來(lái)控制，網(wǎng)頁(yè)的布局，實(shí)現(xiàn)類(lèi)似于自適應(yīng)等比例的縮放的布局。

rem優(yōu)勢(shì)

通過(guò)修改html文字的大小，來(lái)改變頁(yè)面中元素的大小，實(shí)現(xiàn)了頁(yè)面的整體控制

rem的作用

通過(guò)設(shè)置 根元素html的font-size的大小，來(lái)控制整個(gè)html文檔內(nèi)的字體大小、元素寬高、內(nèi)外邊距等，根據(jù)移動(dòng)設(shè)備的寬度大小來(lái)實(shí)現(xiàn)自適應(yīng)，不同的設(shè)備都展示一致的頁(yè)面效果。

簡(jiǎn)單用法

vscode中安裝cssrem插件，通過(guò)這個(gè)插件可以自動(dòng)計(jì)算rem數(shù)值。

具體設(shè)置如下

注意:設(shè)置后 vscode軟件需要重啟 否則計(jì)算的rem值會(huì)出錯(cuò)

待補(bǔ)充

可以通過(guò)js的方式來(lái)改變，也可以通過(guò)css媒體查詢(xún)的方式來(lái)改變，

待補(bǔ)充

css樣式表最基本的概念就是什么

CSS樣式表一般指CSS（層疊樣式表）

層疊樣式表是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。

CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。CSS能夠根據(jù)不同使用者的理解能力，簡(jiǎn)化或者優(yōu)化寫(xiě)法，針對(duì)各類(lèi)人群，有較強(qiáng)的易讀性。