CSS
选择器
CSS选择器：选择页面(文档)中对应的标签，并设置样式
通配符选择器
html
//*：通配符选择器，选择页面中所有的标签
<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
<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
<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
<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
<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
<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>
子代选择器
注意：使用>符号
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
<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
<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
<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>常用属性
样式的优先级
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(双实线）
html
<!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>盒子模型
内边距
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>外边距
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>水平居中
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>定位
相对定位
相对定位：保留原有位置，相对于原来的位置进行位移
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为止
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: 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>固定定位
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>