CSS基本使用方式

选择符{声明块}

声明符可以是：
标签,id,class,title等。

标签选择符

p{text-align:center;} /段落文本居中/

h1{
    color:red; /*设置文本颜色为红色*/
    font-size: 36px;/*设置文本字体大小为36px*/
}

id选择符

#header{background-color:#ccc;}/设置背景为灰色/

#h2 {
    color:blue;
}
<h2 id="xxx">AAA</h2>

类选择符

.blue{color:blue;}/设置元素文本颜色为蓝色/

.classname {
    border-radius:50%;
    opacity:0.5;
}
<img class="border" src="xxxx" >

属性选择符

[title="http://...."]{font-size:20px;}/将具有该属性的元素文本大小设置为20像素/

[alt] {border-radius:50%;border:5px solid red;}/*圆形轮廓，5像素红色实线边框*/
[alt="美女"] {border:5px solid blue;}/*属性alt="美女"的元素，边框设置为蓝色*/
[alt][title] {border:5px solid green;}/*同时设置了alt和title的元素，边框为绿色*/
[alt^="china"] {border:5px solid pink;}/* ^=表示[alt]属性值中，以china开头的元素，边框设置为粉红色*/
[alt$="aklin"] {border:5px solid purple;}/*$=表示[alt]属性值中，以aklin结尾的元素，边框设置为紫色*/
[alt~="php"] {border:5px solid yellow}/*~=表示[alt]属性值中，包含php字符，以空格分隔的元素，边框设置为黄色*/
[alt|="tk"] {border:5px solid black}/*|=表示[alt]属性值中，包含tk字符，且以连接线-分隔的元素，边框设置为黑色*/
<img src="1.jpg" width="100" alt="美女">
<img src="2.jpg" width="100" alt="" title="">
<img src="3.jpg" width="100" alt="china hefei">
<img src="4.jpg" width="100" alt="japan aklin">
<img src="5.jpg" width="100" alt="php mysql">
<img src="6.jpg" width="100" alt="tk-hot">

群组选择符

h1,h2,h3{font-weight:lighter;}/去掉标题元素的加粗样式/

h1,h3 {
    font-weight:light;
    text-decoration:underline;
}
h2,p {
    color:red;
}

后代选择符

section h1{color:red;}/将section元素下面所有h1元素文本设置为红色/

h1 span {
    font-size:16px;
    color:blue;
}
ol li img {
    width:60px;
}
ol li {
    font-size:20px;
    color:grren;
}

子代选择符

div>h1{color:green;}/将div元素下面子级h1元素设置成绿色/

div > a {
    color:red; 
}

伪类选择符

a.visited{color:gray;}/将访问过的链接文本颜色设置为灰色/

伪元素选择符

first-letter:设置段落首行的首字母样式
first-line:设置段落首行文本的样子

li:first-child{color:red;}/*将li标签的第一个元素字体设置为红色*/
li:last-child {color:blue} /*将li标签最后一个元素设置为blue*/
li:nth-child(5) { color:green;}/*将li标签下第五个元素设置为green*/
li:nth-child(even) {color:red;}/*将li标签下偶数的元素设置为红色*/
li:nth-child(add) {color:green;}/*将li标签下奇数的元素设置为绿色*/

通用与同辈选择符

*{font-size:12px;}: /设置网页中的文本均为12像素/

p+a{color:pink;}: /设置P和相邻a标签文本为粉红色/

CSS基本使用方式

CSS基本使用方式

猜你喜欢