Web前端开发（二）-- CSS
2017-10-19 本文已影响0人
404er
1.CSS（Cascading Style Sheet）
- CSS为层叠样式表，不属于编程语言
- 嵌入到HTML，可以使HTML显示更好看
2.在HTML中嵌套CSS的三种方式
1.行内样式表
- 使用HTML标签的 style 属性。
<h2 style="color:blue; width:100px;">行内样式表</h2>
2.内部样式表
-
利用HTML的 style 标签。
<style type="text/css"> h1{width:100px; height:100px; background:red;} </style>
3.外部样式表
-
在HTML外部提供一个扩展名为CSS的文件
<!doctype html> <head> <meta charset="UTF-8"> <title>css外部样式</title> <link rel="stylesheet" type="text/css" href="ccss.css"> </head> <body> <div id="div"></div>> </body> </html>CSS文件：
#div{width:100px; height:100px; background:red;}
3.CSS常用选择器
1.标签选择器
a{width:100px; height:100px; background:red;}
2.ID选择器(id="")
#div{width:100px; height:100px; background:red;}
3.类选择器(class="")
.one{width:100px; background:red;}
- 多用类选择器，少用id选择器
4.CSS边框样式
<style type="text/css">
#mydiv{
border:1px solid red;
}
</style>
5.CSS伪类选择器
- 冒号左右两边不能有空格
- a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才是有效的
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
6.CSS布局
1.设置元素隐藏
display:none;/*隐藏*/
display:block;/*显示*/
2.盒子模型
盒子模型.png
- margin：外边距
- border：边框
- padding：内边距
- content：内容
7.CSS字体
font-size:55px;
8.CSS文本装饰
text-decoration:none;/*无装饰*/
text-decoration:underline;/*下划线*/
9.CSS列表样式
list-style-type:circle;
list-style-type:square;
list-style-type:upper-roman;
list-style-type:lower-alpha;
