Web應用開發之CSS(1)

本文轉載自查看原文 2021-09-27 17:15 146 web/ HTML/ web應用開發

一、CSS基本用法

(CSS: Cascading Style sheet)

樣式引用

行內樣式

CSS寫在html文件中的body里面

例如：

<body>
    <p style="color:red;">五星紅旗的底色是紅色的，上面的五個<sapan style="color:yellow;">星星</sapan>是黃色的
    </p>
</body>

內嵌式

CSS寫在HTML文件中的<head>里面

例如：

<head>
    <style type="text/css">
        h1{
            color:lawngreen;
            font-size:5em;
            font-weight:700;
            font-style:oblique;         
        }
        p{
            color:aqua;
            font-size:2em;
            font-size:300;
        }
    </style>
</head>
<body>
    <h1>內嵌式css的演示</h1>
    <p>內嵌式css的作用只是局限於嵌入了樣式表的單一HTML</p>
</body>

鏈接式

（先加載CSS，再渲染頁面）推薦的方式，將CSS語言分離出來，和HTML文本語言分裝在兩個文件里，語言不混淆，更易於查看和編輯。

建立一個和.html文件在同一目錄的文件夾，並將.css文件放在該文件夾中。

然后將CSS操作放在.css文件中，例如：

h1{
	color:darkred;
	text-align:center;
	font-weight:900;
	
}
p{
	color:chartreuse;
	font-size:1.2em;
}

.css文件里只用寫如上這些，直觀的把操作寫出來，不需要寫<style>標簽啥的並放在里面

然后再.html文件中的<head>標簽里使用<link>標簽，起到鏈接的作用，一個.css文件中的樣式可以鏈接應用到多個不同的html文件中去。rel是relation（關系）；href是路徑，可用url，可用相對路徑和絕對路徑。

<link rel="stylesheet" href="css/demonstration.css" type="text/css">

<body>文件里寫好內容

<body>
	<h1>接式的演示實例</h1>
    <p>
        鏈接式樣式表功能比較強大，樣式表示以獨立的文件形式存在，樣式表中涉及的樣式可以應用到多個HTML文件
    </p>
</body>

看看效果

導入式

(先加載頁面，再渲染)具體實行起來怎么樣不知道，自己常用的是鏈接式，就放個例子：

CSS選擇器

選擇器概念：選擇html文檔中的一個或多個元素，在其上應用指定的樣式

選擇器：表明要應用規則的元素
聲明：表明要如何顯示選擇器的元素

基礎選擇器

元素選擇器

直接是標簽名

h1{
	color:darkred;
	text-align:center;
	font-weight:900;
}
p{
	color:chartreuse;
	font-size:1.2em;
}

ID選擇器

"#"+"id值"

#title{
	text-align:center;
	font-weight:800;
}
#red1{
	font-size:lem;
	colo:red;
}
//在id名前面加上 "#" 以起到選擇作用

//body部分
<body>
    <h1 id="title">夜雨</h1>  //被選擇了
    <h3>唐代：白居易</h3>
    <p id="red1">我有所念人，隔在遠遠鄉</p>  //被選擇了 
    <p id="yellow1">我有所感事，結在深深腸</p>
</body>

類選擇器

"."+"類值"

.red{
 color:red;
}
.yellow{
 color:yellow;
}

通配符選擇器

"*" 表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有元素。基本語法格式如下

*{屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3}

例如下面代碼，用通配符選擇器定義CSS樣式，設置所有html標記字體的大小

*{
	font-size:18px;
}

屬性選擇器

[屬性名]
[屬性名="屬性值"]
[屬性名*="部分屬性值"]
[屬性名^="以XX開頭的屬性值"]
[屬性名$="以XX結尾的屬性值"]

例子中的選擇是，只要有屬性為href的元素，樣式均為粉色，而有屬性href並且該屬性是以"http://www.scu.edu.cn"開頭的元素，則樣式設置為綠色

復合選擇器

由兩個或多個基礎選擇器，通過不同方式組合而成，具體如下

交集選擇器（又稱標簽指定式選擇器）

（即……又……）

標簽寫前面，類值或id值緊跟后面即可，加.或#

並集選擇器

“,” 用逗號將各個選擇器連接而成，任何形式選擇器（包括標記選擇器、class類選擇器、id選擇器），都可以作為並集選擇器的一部分

后代選擇器

標簽1 標簽2 選擇所有后代

標簽1>標簽2 選擇兒子元素（直系下一級）

標簽1+標簽2 選擇同級，相鄰的元素

標簽1~標簽2 選擇同級，無論相鄰與否的元素

后代選擇器

兒子選擇器

相鄰兄弟選擇器

一般兄弟選擇器

二、基本樣式

背景

顏色

body{
	background-color:red;
}

顏色可以有種方式輸入

根據顏色名字：red、yellow……
根據顏色16進制：#rrggbb

00-FF （0-256）
顏色十進制組合：rgb（xx,xx,xx）

紅藍綠三原色配色，xx可以填0~255/百分比（飽和度）
帶aplpha通道的顏色設置：rgba（xx,xx,xx,0-1）

可以設置透明度

好像加不加color都可以，而且rgb好像也可以設置透明度，就在三個原色之后加逗號再加0-1（透明程度），不知道怎么回事

圖片

body{	background-image:url();//可以填http，也可以填本地圖片}

平鋪

background-repeat: norepeat/repeat/repeat-x/repeat-y;

位置

background-position: bottom/top/center/left/right/the combined attribute;

是否滾動

background-attachment: scroll/fixed;

字體

文字段落設置

文字顏色：color
文字的縮進：text-indent

文字縮進的大小使用單位是長度單位：inch、cm、mm、em、%pt、rem

rem是以瀏覽器默認16元素為單位做改動，5rem就是80像素大小

em相當與父元素，rem相當與根元素，均是相對大小
文字行高：line-height
文字對齊：text-align
文字詞與詞的空白：word-spacing
文字字母之間空白：letter-spacing
文字大小寫：text-transform

uppercase：單詞大寫
文字修飾：text-decoration

underline，overline，line-through：划線，可以同時使用，用空格間隔開
文字中的空格處理：whitespace

文本空格處理五種方式

normal：n個空格、回車顯示出來都是1個空格

pre：網頁顯示的與敲代碼時的輸入相同

pre-wrap：限定每行顯示寬度，超過寬度自動換行

no-wrap：不自動換行

pre-line：n個空格顯示為1個空格，回車會保留顯示出來
文字書寫方向：direction

字體設置

字體家族系列：font-family

1、通用字體：serif、sans-serif、monospace、cursive（一種手寫體）、fantasy（一種藝術字）

2、專用字體：simsun

3、系列字體：宋體黑體楷體
字體是否傾斜：font-style
字體的變體：font-variant

normal、small-caps（小型大寫字母)
字體加粗：font-weight

bold、bolder、normal、100-900
字體大小：font-size

px、em、%