CSS之第三天总结

一、属性选择器：

HTML：

<p class="a">测试数据1</p>
<p class="qq">测试数据2</p>
<p class="xyz abc">测试数据3</p>
<p class="aa123">测试数据4</p>
<p class="test-abc">测试数据5</p>
<p class="hello-z-world">测试数据6</p>
<p class="y-1">测试数据7</p>
<p class="y-2">测试数据7</p>

CSS（解析）：

p[class]{color:green;}
/*选择具有属性class的p元素；*/
p[class="qq"]{color:red;} 
/*选择具有class属性且属性值等于qq的p元素；*/    
p[class~="abc"]{color:blue;}
/*选择具有class属性且属性值为一空格分割的字词列表，其中一个等于abc的p元素；*/
p[class^="aa"]{color:yellow;}
/*选择具有class属性且属性值为以aa开头的字符串的p元素；*/       
p[class$="abc"]{color:black;}
/*选择具有class属性且属性值为以abc结尾的字符串的p元素；*/
p[class*="z"]{color:orange;}
/*选择具有class是属性且属性值包含z的字符串的p元素；*/
p[class|="y"]{color:#ccc;}
/*选择具有class属性且属性值为以y开头并用连接符”-”分割的字符串的p元素。*/

二、字体样式：

1.font-family（字体名称）:

例：P{font-family:’宋体’,’微软雅黑’,’Arial’}

2. font-size(字体大小)：

例：p { font-size:14px;}   

3. font-weight(字体加粗)：

例：p { font-weight:bold;}

4. font-style(字体斜体)

例：p { font-style: normal; }

p { font-style: italic; }
p { font-style: oblique; }

5. font(字体样式缩写)

例：

p{

font-style:italic;

font-weight:bold;

font-size:14px;

line-height:22px;

font-family:宋体;

}

缩写后：p { font:italic bold 14px/22px 宋体}

在行高处用/分开。

6. color(字体颜色)

说明：

颜色属性值分三种值的格式

1. 英文单词，比如 red , yellow ,green …
2. 十六进制表示方式，#开头，6个十六进制的字符或数字 组合。比如：#FFFFFF，#000000，#CCCAAA，#22BCAD。十六进制： 0-9 和 a-f
3. RGB模式，红 0-255，绿 0-255，蓝 0-255。比如： RGB(120,33,234)

RGBA(255,0,0,.5)   RGBA模式，最后的A表示透明度50%

例：

p{

       color:#FF0000;

}

7. text-decoration(文本装饰线条)

例：p { text-decoration:underline;}

8. text-shadow(文字阴影)

例：h1{

       text-shadow: 2px 2px #ff0000;

}

三、元素样式    

1.宽度width：

例：p { width:300px;}

div { width:50%;}

即既可以用像素也可以用百分比。

2.高度height：

例：div { height:200px;}

3.外边距margin :

margin-top               设置上边的外边距

margin-bottom        设置下边的外边距

margin-left         设置左边的外边距

margin-right              设置右边的外边距

缩写型式：

margin: 上边距  右边距  下边距  左边距

margin: 上下边距    左右边距

margin: 上边距  左右边距  下边距

例： div { width:300px; height:100px; margin:10px;}

4.内边距padding :

padding-top               设置上边的内边距

padding-bottom        设置下边的内边距

padding-left               设置左边的内边距

padding-right             设置右边的内边距

缩写型式：

padding: 上边距  右边距  下边距  左边距

padding : 上下边距  左右边距

padding : 上边距  左右边距  下边距

例：div { width:300px; height:100px; padding:10px;}