CSS快速入門-屬性和僞類

時間 2019-11-20

標籤 css 快速入門屬性欄目 CSS 简体版

原文原文鏈接

1、屬性選擇器

<div class="gradefather"> hello1
　　<div name="son">hello2
　　　　<p name="son">hello4</p>
　　</div>
　　<p name="son">hello3</p>
　　<p>hello5</p>
</div>

屬性選擇器：html

<style>
p[name="son"]{
font-size:30px;
color:red;
}
</style>

E[att] 匹配全部具備att屬性的E元素，不考慮它的值。（注意：E，Element。在此處能夠省略，好比「[cheacked]」。如下同。）
p[name] { color:#f00; }api

E[att=val] 匹配全部att屬性等於「val」的E元素。值僅等於val的元素。
p[name=」son」] { color:#f00; }ide

E[att~=val] 匹配全部att屬性具備多個空格分隔的值、其中一個值包含「val」的E元素 工具

p[name~=」son」] { color:#f00; }測試

E[attr^=val] 匹配屬性值以指定值val開頭的每一個元素
div[name^="test"]{background:#ffff00;}字體

E[attr$=val] 匹配屬性值以指定值val結尾的每一個元素
div[name$="test"]{background:#ffff00;}url

E[attr*=val] 匹配屬性值中包含指定值val的每一個元素
div[name*="test"]{background:#ffff00;}spa

E[attr|=val] 匹配屬性值中包含以"val-"開頭的值
div[name*="test-hahaha"]{background:#ffff00;}指針

注意：
一、~ 是多個屬性中，包含有val（精確匹配）屬性的元素；而*是指屬性包含有val即匹配（模糊匹配）。
例如：code

name="girl boy"(~和*均可匹配) 和name="girl-boy"（僅*可匹配）
二、| 是指以val-開頭的元素
三、E[attr]，E表明標籤，attr表明屬性。

2、僞類

一、before和after僞類

在p標籤前面添加內容：
p:before{
content:"start";
color:red;
}

在p標籤後面添加內容：
p:after{
content:"end";
color:red;
}

二、a僞類
<a href="http://wwww.baidu.com">百度一下</a>
a:link {color:red;}

a:visited {color:blue;}

a:hover {color:green;}
a:active {color:yellow;}

a:hover 必須位於 a:link 和 a:visited 以後！！【hover屬性必須應用在link上，且被訪問過】
a:active 必須位於 a:hover 以後！！

3、屬性

一、顏色
經過英文、十六進制、rgb、rgba四種方法均可以。
<div style="color:blue">ppppp</div>
<div style="color:#ffee33">ppppp</div>
<div style="color:rgb(255,0,0)">ppppp</div>
<div style="color:rgba(255,0,0,0.5)">ppppp</div> #三原色紅綠藍以及透明度

二、背景
上=>右=>下=>左
background-color: red
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)

簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

注意：若是將背景屬性加在body上，要記得給body加上一個height，不然結果異常，這是由於body爲空，沒法撐起背景圖片，另外，若是此時要設置一個width＝100px，你也看不出效果，除非你設置出html。

三、文本
font-size: 10px; #字體大小
text-align: center;#橫向排列
line-height: 200px;#文本行高通俗的講，基於字體大小的百分比
text-indent: 150px;# 首行縮進，50%：基於父元素（weight）的百分比
letter-spacing: 10px; #字母間距
word-spacing: 20px;#單詞間距
direction: rtl;#文字方向，從右到左
text-transform: capitalize;#文本轉變，單詞開頭大寫

四、字體
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">測試字體</h1>

五、連接
● a:link - 普通的、未被訪問的連接
● a:visited - 用戶已訪問的連接
● a:hover - 鼠標指針位於連接的上方
● a:active - 連接被點擊的時刻
註釋：爲了使定義生效，a:hover 必須位於 a:link 和 a:visited 以後！！
註釋：爲了使定義生效，a:active 必須位於 a:hover 以後！！

六、列表
list-style 簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中。
list-style-image 將圖象設置爲列表項標誌。
list-style-position 設置列表中列表項標誌的位置。
list-style-type 設置列表項標誌的類型。

ul,ol{
list-style: decimal-leading-zero;
list-style: none; #常常做爲去掉ul前面的符號
list-style: circle;
list-style: upper-alpha;
list-style: disc;
}

七、表格
border
border-collapse：邊框合併模型separate、collapse、inherit
width
height
text-align
vertical-align
padding：td裏面文本和邊框的距離
color
background-color

八、輪廓
outline ： #00ff00 dotted thick 顏色、虛線、粗的
outline-color：輪廓顏色
outline-style:輪廓樣式
none 默認。定義無輪廓。
dotted 定義點狀的輪廓。
dashed 定義虛線輪廓。
solid 定義實線輪廓。
double 定義雙線輪廓。雙線的寬度等同於 outline-width 的值。
groove 定義 3D 凹槽輪廓。此效果取決於 outline-color 值。
ridge 定義 3D 凸槽輪廓。此效果取決於 outline-color 值。
inset 定義 3D 凹邊輪廓。此效果取決於 outline-color 值。
outset 定義 3D 凸邊輪廓。此效果取決於 outline-color 值。
inherit 規定應該從父元素繼承輪廓樣式的設置。
outline-width：輪廓寬度

九、 dispaly屬性
● none
● block
● inline

bxslider 專門用於輪播圖的工具

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。