CSS
选择器
CSS选择器：选择页面(文档)中对应的标签，并设置样式
通配符选择器
//*：通配符选择器，选择页面中所有的标签
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2> <p>用良心做教育</p><p>做真实的自己</p> <span>匠心育人</span><span>初心至善</span></body>
</html>基本选择器
基本选择器分为标签选择器、类(class)选择器、ID选择器
标签选择器
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">p{color: #FF0000;}</style><body><h1>一级标签</h1><p>用良心做教育</p><span>匠心育人</span></body>
</html>类（class）选择器
以 . 开头
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.myclass{color: #FF0000;}</style></head><body><h1 class="myclass">一级标签</h1><h2>二级标签</h2></body>
</html>ID选择器
以#开头，id唯一
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">#myid{color: #FF0000;}</style><body><h1 id="myid">一级标签</h1><h2>二级标签</h2></body>
</html>
基本选择器的优先级
ID选择器 > Class选择器 > 标签选择器
群组选择器
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">h1,h3,h5,p{color: red;}</style><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p></body>
</html>
派生选择器
也被称为上下文关系选择器
分为后代选择器、子代选择器、相邻兄弟选择器
后代选择器
注意使用空格符号
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">ul a{color: red;}</style><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li></ul><a href="#">超链接7</a><a href="#">超链接8</a><a href="#">超链接9</a></body>
</html>
子代选择器
注意：使用>符号
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">li>a{color: red;}</style><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li></ul><a href="#">超链接7</a><a href="#">超链接8</a><a href="#">超链接9</a></body>
</html>
相邻兄弟选择器
注意使用+符号
样式作用在后者
<html><head><meta charset="UTF-8"><title></title><style type="text/css">a+a{color: red;}</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li></ul><a href="#">超链接7</a><a href="#">超链接8</a><a href="#">超链接9</a></body>
</html>
属性选择器
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 属性选择器* * 单个属性的属性选择器：* input[placeholder]{color: red;}* * 单个属性+值的属性选择器：* input[type="text"]{color: red;}* * 多个属性的属性选择器：* input[name][placeholder]{color: red;}* * 多个属性+值的属性选择器：* input[type="text"][placeholder]{color: red;}* input[type="text"][placeholder="请输入账号..."]{color: red;}s*/</style></head><body><form action="服务器地址" method="post">账号：<input type="text" name="username" placeholder="请输入账号..."/><br />密码：<input type="password" name="password" placeholder="请输入密码..."/><br />确认密码：<input type="password" name="repassword"/><br />姓名：<input type="text" name="name"/><br />昵称：<input type="text" name="nickName" placeholder="请输入昵称..."/><br />性别：<input type="radio" name="sex" value="man" checked="checked"/>男<input type="radio" name="sex" value="woman"/>女<br />爱好：<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球<input type="checkbox" name="hobbies" value="basketball" checked="checked"/>篮球<input type="checkbox" name="hobbies" value="shop"/>购物<br />国籍：<select name="nationality"><option value="001">韩国</option><option value="002">美国</option><option value="003" selected="selected">中国</option><option value="004">日本</option></select><br /><input type="submit" value="注册" /></form></body>
</html>锚伪类
设置超链接各个状态的样式（未访问状态、已访问状态、鼠标悬停在超链接状态、鼠标按下状态）
<html><head><meta charset="UTF-8"><title></title><style type="text/css">a:link {color: #FFCCFF} /* 未访问的链接 */a:visited {color: #FF0000} /* 已访问的链接 */a:hover {color: #66FF66} /* 鼠标移动到链接上 */a:active {color: #33FFFF} /* 选定的链接 */</style></head><body><a href="http://www.163.com">跳转页面</a></body>
</html>常用属性
样式的优先级
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--样式的优先级别：行内样式 > 内/外部样式注意：内外部样式要看加载顺序--><!--外部样式表--><link rel="stylesheet" type="text/css" href="../../css/new_file.css"/><!--内部样式表--><style type="text/css">h1{color: red;}</style></head><body><!--行内样式表--><h1 style="color: blue;">我好像在哪儿见过你</h1></body>
</html>常用的CSS属性
1.字体属性
属性名称
font-family(字体)
font-size（大小）
font-style（风格）
---- normal标准样式
---- italic斜体
---- oblique倾斜
---- inherit从父类继承的字体样式
font-weight(字体加粗)
----normal标准样式
----bold粗体
----bolder更粗
----lighter更细
2.文本属性
属性名称
letter-spacing(字母间隔)
text-decoration（划线修饰）
text-align（文本对齐方式）
text-indent(文本缩进)
line-height（行高）
3.背景
属性名称
background-color
background-image
background-repeat
4.边框
属性名称
border-bottom
solid(实线)
dashed(虚线)
double(双实线）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{font-family: "微软雅黑";/*设置字体*/font-size: 50px;/*设置字体大小*/font-style: italic;/*设置字体样式*/font-weight: bold;/*设置字体粗细*/letter-spacing: 10px;/*设置文本间隔*/text-decoration: underline;/*设置文本划线*/text-align: center;/*设置对齐方式*/background-color: red;/*设置背景颜色*/color: white;/*设置字体颜色*/border: orange 5px solid;/*设置边框：颜色，粗细，实线*/}a:link {color: #000000} /* 未访问的链接 */a:visited {color: #000000} /* 已访问的链接 */a:hover {color: #3366FF} /* 鼠标移动到链接上 */a:active {color: #3366FF} /* 选定的链接 */a{text-decoration: none;/*去除划线*/}button{width: 500px;height: 500px;background-image: url(../../img/01.jpg);/*设置背景图片*/background-repeat:repeat-y;/*设置平铺方式*/}img{border-radius: 50%;/*倒圆角*/}</style></head><body><p>我好像在哪儿见过你</p><a href="#">地图</a><br /><button>普通按钮</button><br /><img src="../../img/01.jpg" width="100px" height="100px" /></body>
</html>盒子模型
内边距
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;padding: 50px;/*设置上下左右内边距*/padding-top: 50px;/*设置上内边距*/padding-bottom: 50px;/*设置下内边距*/padding-left: 50px;/*设置左内边距*/padding-right: 50px;/*设置右内边距*//** 注意1：内边距可能会把盒子撑变形* 注意2：IE老版本不支持内边距* 经验：能不用内边距就不用*/}</style><body><div><span>我好像在哪儿见过你</span></div></body>
</html>外边距
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;margin-top: 50px;/*设置上外边距*/margin-bottom: 50px;/*设置下外边距*/margin-left: 50px;/*设置左外边距*/margin-right: 50px;/*设置右外边距*/margin: 50px;/*设置上下左右外边距*/}</style><body><div><span>我好像在哪儿见过你</span></div></body>
</html>
水平居中
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;margin: 0 auto;/*水平居中*/}</style><body><div><span>我好像在哪儿见过你</span></div></body>
</html>
定位
相对定位
相对定位：保留原有位置，相对于原来的位置进行位移
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">#manager{border: orange 1px solid;margin-top: 50px;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: relative;/*相对定位：保留原有位置，相对于原来的位置进行位移*/top: 50px;left: 50px;}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>绝对定位
绝对定位：不保留原有位置，向上找寻父级元素，判断父级元素中是否有position属性，如果有就按照父级元素进行位置，如果没有就继续向上找寻父级元素，直到body为止
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">#manager{border: orange 1px solid;margin-top: 50px;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: absolute;/*绝对定位：不保留原有位置，向上找寻父级元素，判断父级元素中是否有position属性，如果有就按照父级元素进行位置，如果没有就继续向上找寻父级元素，直到body为止*/top: 50px;left: 50px;}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>固定定位
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">div{position: fixed;/*固定定位*/top: 80%;right: 20%;}</style><body><a name="top"></a><!--下锚点--><div><a href="#top">置顶</a></div><!--导航栏--><a href="#new01">法治</a><a href="#new02">国际</a><a href="#new03">娱乐</a><a name="new01"></a><!--下锚点--><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><a name="new02"></a><!--下锚点--><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><a name="new03"></a><!--下锚点--><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1> </body>
</html>
