CSS简介及常用标签及属性
一、概述
css是英文Cascading Style Sheets的縮寫,稱為層疊樣式表，用于對(duì)頁(yè)面進(jìn)行美化。
存在方式有三種：元素內(nèi)聯(lián)、頁(yè)面嵌入和外部引入，比較三種方式的優(yōu)缺點(diǎn)。
語(yǔ)法：style = 'key1:value1;key2:value2;'
在標(biāo)簽中使用 style='xx:xxx;'
在頁(yè)面中嵌入 < style type="text/css"> </style > 塊
引入外部css文件
必要性：美工會(huì)對(duì)頁(yè)面的色彩搭配和圖片的美化負(fù)責(zé)，開發(fā)人員則必須知道是如何實(shí)現(xiàn)的
語(yǔ)法結(jié)構(gòu)
每個(gè)CSS樣式由兩個(gè)組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個(gè)聲明之后用分號(hào)結(jié)束
在css的三個(gè)組成部分中，“對(duì)象”是很重要的，它指定了對(duì)哪些網(wǎng)頁(yè)元素進(jìn)行設(shè)置，因此，它有一個(gè)專門的名稱——選擇器（selector）
二、CSS樣式
2.1 行內(nèi)樣式
它是所有樣式方法中最為直接的一種，它直接對(duì)HTML的標(biāo)簽使用style屬性，然后將css代碼直接寫在其中
<p style="color:#ff0000; font-size:20px; ">正文內(nèi)容 1</p>
<p style=“color:#000000; font-style:italic;”>正文內(nèi)容 2</p>
<p style="color:#ff00ff; font-size:25px; font-weight:bold;">正文內(nèi)容 3</p>
2.2 內(nèi)部樣式
內(nèi)部樣式就是將css寫在<head>與</head>之間，并且用<style>和</style>標(biāo)簽進(jìn)行聲明。
<style type="text/css">
??? p{
?????? ?color:#0000ff;
??? ?text-decoration:underline;
??? ?font-weight:bold;
??? ?font-size:25px;
??? }
?</style>
2.3 外部樣式
<head>
??? <title>頁(yè)面標(biāo)題</title>
??? <link href="07-07.css" type="text/css" rel="stylesheet">
</head>
<h2>CSS標(biāo)題</h2>
<p>這是正文內(nèi)容……</p>
<h2>CSS標(biāo)題</h2>
<p>這是正文內(nèi)容……</p>
?
三、CSS選擇器
3.1標(biāo)簽選擇器
div{ background-color:red; }
<div > </div>
3.2 類選擇器
.bd{ background-color:red; }
<div class='bd'> </div>
3.3 ID選擇器
#idselect{ background-color:red; }
<div id='idselect' > </div>
3.4 關(guān)聯(lián)選擇器
#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>
3.5 包含選擇器
input,div,p{ background-color:red; }
3.6 屬性選擇器
input[type='text']{ width:100px; height:200px;}
3.7 偽類選擇器
:link????? 定義超鏈接默認(rèn)樣式
:visited??? 定義訪問(wèn)過(guò)的樣式
:hover???? 定義鼠標(biāo)經(jīng)過(guò)的樣式
:active???? 定義鼠標(biāo)按下的樣式
a:link { color:#ff0000; }? /*默認(rèn)樣式，超鏈接文字為紅色*/
a:visited { color:#00ff00; }? /*訪問(wèn)過(guò)后，超鏈接文字為綠色*/
a:hover { color:#0000ff; }? /*鼠標(biāo)經(jīng)過(guò)，超鏈接文字為藍(lán)色*/
a:active { color:#ffff00; }? /*鼠標(biāo)按下時(shí)，超鏈接文字為黃色*/
3.8 選擇器優(yōu)先級(jí)
行內(nèi)樣式>id選擇器>類選擇器>標(biāo)簽選擇器>通用選擇器
其他材料參考：http://www.w3school.com.cn/css/index.asp
四、CSS常用屬性
4.1 border屬性-設(shè)置邊框
border-style:dotted solid double dashed;
上邊框是點(diǎn)狀、右邊框是實(shí)線、下邊框是雙線、左邊框是虛線
<div style='border:1px solid red; height: 10px;'></div>
<div style='border:1px dotted red; height: 10px;'></div>
<div style='border:1px dashed red; height: 10px;'></div>
4.2 文本屬性
文本行高：line-height
語(yǔ)法： line-height：行高值(像素)
水平對(duì)齊： text-align
left：左對(duì)齊；
right：右對(duì)齊
center：居中對(duì)齊
4.3 文字屬性
字號(hào)：font-size
語(yǔ)法：font-size：大小的取值(像素值)
文字顏色：color
語(yǔ)法：Color：顏色取值
?color:#292378;? ?//6個(gè)十六進(jìn)制數(shù)獲得顏色
?color:#A64; ?//#AA6644的縮寫
?color:red;??//顏色關(guān)鍵字定義顏色
?color:rgb(100,159,170);?? //rgb定義顏色
4.4 background屬性-設(shè)置背景
背景顏色：background-color
關(guān)鍵字：red pink orange
背景圖像：background-image
使用background-image屬性可以設(shè)置元素的背景圖像。
語(yǔ)法：background-image：url（圖像地址）
背景重復(fù)：background-repeat
語(yǔ)法：background-repeat：取值
Repeat(默認(rèn))?????? 背景圖像平鋪排滿整個(gè)網(wǎng)頁(yè)
repeat-x?????????? 背景圖像只在水平方向上平鋪；
repeat-y?????????? 背景圖像只在垂直方向上平鋪。
no-repeat????????? 背景圖像不平鋪
背景位置：background-position
background-position-x:200px ;
background-position-y:100px;
4.5 margin外邊距填充屬性
邊距屬性
?margin是對(duì)外元素的距離，用來(lái)控制元素本身的浮動(dòng)位置
?四邊距margin
?上邊距margin-top
?下邊距margin-bottom
?左邊距margin-left
?右邊距margin-right
?margin 10px 20px 30px 40px;
提供一個(gè)，用于的四邊；
提供兩個(gè)，第一個(gè)用于上－下，第二個(gè)用于左－右；
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左－右，第三個(gè)用于下；
提供四個(gè)參數(shù)值，將按上－右－下－左的順序作用于四邊；
居中顯示
4.6 padding內(nèi)邊距填充屬性
填充屬性
?padding是對(duì)內(nèi)元素，用來(lái)控制元素內(nèi)部元素的位置
四邊填充 padding
上填充????? padding-top
下填充????? padding-bottom
左填充????? padding-left
右填充????? padding-right
?padding 10px 20px 30px 40px;
提供一個(gè)，用于的四邊；
提供兩個(gè)，第一個(gè)用于上－下，第二個(gè)用于左－右；
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左－右，第三個(gè)用于下；
提供四個(gè)參數(shù)值，將按上－右－下－左的順序作用于四邊；
4.7 float布局屬性
float
?float:none;?默認(rèn)值
?float:left;?左浮
?float:right;?右浮
4.8 Display屬性
Display：
block：將元素變成塊級(jí)標(biāo)簽，可以設(shè)置高度和寬度
Inline：將元素變成行內(nèi)標(biāo)簽，不能設(shè)置高度和寬度
Inline-block：同時(shí)具有兩種
none：標(biāo)簽消失
<span style="height:70px;width:20px;">行內(nèi)標(biāo)簽</span>
4.9 布局屬性overflow
溢出處理屬性overflow分類
Overflow ?(水平和垂直均設(shè)置)
Overflow-x?(設(shè)置水平方向)
Overflow-y?(設(shè)置垂直方向)
4.10 布局屬性position
定位屬性position:
fixed : 將某個(gè)元素固定在頁(yè)面的某個(gè)位置
absolute :? 絕對(duì)定位
relative：相對(duì)定位
定位方式通常與定位坐標(biāo)一起使用
定位坐標(biāo)：要定位的元素偏離目標(biāo)位置多遠(yuǎn)的距離
Top，left，right，bottom
定位屬性position:
fixed : 將某個(gè)元素固定在頁(yè)面的某個(gè)位置
特點(diǎn)：
?? 1.相對(duì)于瀏覽器的窗口來(lái)進(jìn)行定位的
?? 2.固定到窗口的某個(gè)位置上，不隨內(nèi)容而滾動(dòng)
?? 3.如果不設(shè)置定位坐標(biāo)，就在原來(lái)的位置，否則反之
定位屬性position:
relative: 相對(duì)定位
特點(diǎn)：
?? 1.相對(duì)定位是相對(duì)于，自身的左上角為坐標(biāo)點(diǎn)
?? 2.占據(jù)空間
定位屬性position:
absolute：絕對(duì)定位
特點(diǎn)：
?? 1.相對(duì)于（父級(jí)元素的定位方式（relative ）來(lái)進(jìn)行定位 找祖先元素是否有定位，如果沒有定位，找到body，就相對(duì)body來(lái)定位 如果找到祖先元素有定位，相對(duì)祖先元素來(lái)定位
?? 2.不占空間
4.11 布局屬性z-index
定位屬性z-index:
Z-index：設(shè)置對(duì)象的層疊順序
特點(diǎn)：
?? 較大 number 值的對(duì)象會(huì)覆蓋在較小 number 值的對(duì)象之上
??
轉(zhuǎn)載于:https://www.cnblogs.com/feiyu_Team/p/6439252.html
總結(jié)
以上是生活随笔為你收集整理的CSS简介及常用标签及属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 配置 Zabbix 监控 Nginx(A
- 下一篇： html5知识点：CSS3新增选择器