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