CSS样式

CSS

层叠样式表

作用

• 内容与表现分离
• 网页的表现同一，容易修改
• 丰富的样式，是页面布局灵活
• 减少网页代码量，增加网页浏览速度，节省网络带宽
• 有利于被搜索引擎收录
• 有浏览器解释运行
• 不区分大小写

使用

行内样式（优先级最高）

<label style="color: red;
            background-color: greenyellow;
            font-family: 微软雅黑;
            font-size: 50px;">标签</label>

内部样式表

<style type="text/css">
    p{
        color: red;
        background-color: greenyellow;
        font-family: 微软雅黑;
        font-size: 50px;
    }
</style>

外部样式表（优先级最低）

<link rel="stylesheet" type="text/css" href="../css/common.css">

选择器

标签选择器

 p{color: red; background-color: greenyellow;}

id选择器(唯一)

#p1{color: green;background-color: red;}
<p id="p1">该段落标签</p>

参考样式

属性	作用
background-color	背景颜色
width	设置元素的宽度（不包括填充，边框和页边距）
height	设置元素的高度（不包括填充，边框，或页边距）
font-size	设置字体大小
color	指定文本的颜色
font-style	指定文本的字体样式
text-align	指定元素文本的水平对齐方式
border-color	设置一个元素的四个边框颜色。（上右下左）
border-style	设置元素四边框样式（上右下左）（dotted(点) solid(实) double(双) dashed(虚)）
outline	绘制于元素周围的一条线，位于边框边缘的外围，突出元素
outline-color	指定轮廓颜色
outline-style	指定outline的样式

类选择器

.p2{color: blue; background-color: gold;}

后代选择器

用以选择特定元素或元素组的后代（内部标签）

<!--只影响p里的textarea,不影响em-->
<style>
        p textarea{
            color: blue;
        }
    </style>
<p>
    <em>kkkkk</em>
    <textarea>
        55555
    </textarea>
</p>

子代选择器

用以选择特定元素或元素组的子代（内部标

<!--    只影响p里的子代em-->
<style>
	p > em{
		color: blue;
	}
</style>
<p>
    <em>kkkkk</em>
    <strong><em>kkkkkk</em></strong>
</p>

通用选择器

控制页面所有元素

<style>
	*{
		color: blue;
	}
</style>

群组选择器

<style>
	h1,h2,h3{
		color: blue;
	}
</style>

相邻元素选择器

可选择紧挨另一元素后的元素

<!--    只影响p后的第一个div-->
<style>
    p + div{
        color: red;
    }
</style>
<p>段落标片</p>
<div>div</div>
<div>div</div>

属性选择器

<!--    只影响text的input-->
<style>
	input[type = "text"]{
		width: 200px;
        height: 200px;
 	}
</style>

伪类选择器（控制超链接）

<style>
    a:link{
        color: black;
    }
    a:visited{
        color: black;
    }
    a:hover {
        color: red;
    }
    a:active{
        color: red;
    }
</style>

优先级

就近原则：距离最近

顺序原则：最后书写

精细原则：选择器指向

盒子模型

内/外边距

属性	说明	实例
padding/margin	四方向为同意宽度	padding：5px
	上下、左右	padding：5px,5px
	上、左右、下	padding：5px,5px,5px
	上、右、下、左	padding：5px,5px,5px,5px