什么是CSS，有什么作用？
CSS（Cascading Style Sheet）：层叠样式表语言
CSS的作用是：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
CSS好比是HTML的化妆品一样。
HTML还是主体，CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。
常见的CSS样式要会写，别人写的CSS样式要能看懂。
在HTML页面中嵌套使用CSS的三种方式：
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式：
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
语法格式：
<head>
<style type="text/css">
选择器 {
样式名：样式值；
样式名：样式值；
......
}
选择器 {
样式名：样式值；
样式名：样式值；
......
}
</style>
</head>
第三种方式：链入样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件中，在需要的网页上直接引入css文件，样式就引入了）
语法格式：
<link type="text/css" rel="stylesheet" href="css文件的路径" />
这种方式易维护，维护成本较低。
第一种样式：内联定义方式
width 宽度样式
height 高度样式
background-color 背景色样式
display 布局样式（none表示隐藏，block表示显示）
内联定义方式.png
id选择器
语法格式：
#id{
样式名：样式值；
样式名：样式值；
......
}
标签选择器
语法格式：
标签名 {
样式名：样式值；
样式名：样式值；
......
}
注意：标签选择器作用的范围比id选择器广。
类选择器
语法格式：
.类名{
样式名：样式值；
样式名：样式值；
......
}
cursor：鼠标样式。
pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer
第一种样式：
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<!--
width 宽度样式
height 高度样式
background-color 背景色样式
display 布局样式（none表示隐藏，block表示显示）
-->
<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
border-color : red;border-width : 1px;border-style : solid;"></div>
<br><br>
<!--
样式还可以这样写
border : 1px solid black;
-->
<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
border : 1px solid black;"></div>
</body>
</html>
第二种样式：
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
/*
这是CSS的注释
*/
/*
id选择器
语法格式：
#id{
样式名：样式值；
样式名：样式值；
样式名：样式值；
......
}
*/
#usernameErrorMsg {
color : red;
font-size : 12px;
}
/*
标签选择器
语法格式：
标签名{
样式名：样式值；
样式名：样式值；
样式名：样式值；
......
}
标签选择器作用的范围比id选择器广。
*/
div {
background-color : black;
border : 1px solid red;
width : 100px;
height : 100px;
}
/*
类名选择器
语法格式：
.类名{
样式名：样式值；
样式名：样式值；
样式名：样式值；
......
}
*/
.student {
border : 1px solid red;
width : 400px;
height : 30px;
}
</style>
</head>
<body>
<!--
设置样式字体大小12px，颜色为红色
-->
<span id="usernameErrorMsg">对不起用户名不能为空！/span>
<div></div>
<div></div>
<div></div>
<!--class相同的标签可以认为是一个同样的标签。-->
<br><br><br>
<input type="text" class="student"/>
<br><br><br>
<select class="student">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
第三种样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>
<!--引入css-->
<link rel="stylesheet" type="text/css" href="css/1.css" />
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baiduSpan">点击我链接到百度哦！</span>
</body>
</html>
文件位置.png
列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
ul{
/*list-style-type: none;*/
/*list-style-type: circle ;*/
list-style-type: square ;
}
</style>
</head>
<body>
<ul>
<li>中国
<ul>
<li>北京</li>
<li>上海</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>俄国</li>
</ul>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式的绝对定位</title>
<style type="text/css">
#div1{
background-color: red;
border: 1px black solid;
width: 300px;
height: 300px;
position : absolute; /*绝对定位*/
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
补充
介绍：
1.是一种专门在浏览器编译并执行的编程语言.
2.用于定位浏览器中HTML标签并对定位的HTML标签中【样式属性】进行统一管理
HTML标签属性分类
1.基本属性：
大多数HTML标签都拥有属性，是一个非常庞大群体 比如 id属性，相当于身份证编号，用于区分HTML标签
<input type="text" id="one"/>
<input type="text" id="two"/>
比如 name属性，相当于人名字,允许一组标签拥有相同name
<input type="text" id="one" name="myText"/>
<input type="text" id="two" name="myText"/>
2.样式属性：
是一个非常庞大群体，通知浏览器将HTML标签中数据在浏览器中以指定形态展示
<div style="background-color:red;color:green;width:300px;height:200px"></div>
3.工作状态属性:
只存在于【表单域标签】中，用于表示【表单域标签】状态.checked:存在于radio与checkbox中，表示标签是否被选中
disabled:表示标签处于不可用状态
readOny:表示标签处于只读状态
seleteced：存在option标签，表示标签是否被选中
4.监听属性：
监听属性用户与HTML标签之间进行通信通道，监听属性用于监听用户在何时对当前标签进行何种操作,当指定操作产生时，监听属性将会通知浏览器调用对应JavaScript方法处理当前请求
样式属性开发难度：
1.由于网页经常出现大量的HTML标签拥有相同的样式属性设置，因此导致前端工程师进行大量重复性开发操作.
2.当用户修改需求时，导致前端工程师进行大量重复维护工作
CSS编程语言作用：
1.通知浏览器将所有满足定位条件的HTML标签进行统一定位
2.通知浏览器对已经定位HTML标签中样式属性进行集中统一赋值管理
CSS选择器:
1.介绍：
CSS选择器，实际上就是一组定位条件用于定位HTML标签。
CSS选择器有9个大的分类
2.CSS选择器语法格式:
<html>
<head>
<style type="text/css">
定位条件{
"样式属性1":"值1";
"样式属性2"："值2"
}
</style>
</head>
</html>
ID选择器:
1.介绍：
根据HTML标签中ID属性的值进行定位
2.语法:
<style type="text/css">
#id编号{
"样式属性1":"值1";
"样式属性2"："值2"
}
</style>
标签类型选择器:
1.介绍:
根据HTML标签类型进行定位
2.语法:
<style type="text/css">
标签类型名{
"样式属性1":"值1";
"样式属性2"："值2"
}
</style>
层级选择器
1.HTML标签之间关系：
父子关系
兄弟关系
2.父子关系:
即为包含关系
<tr>
<td>
<input type="text">
</td>
</tr>
td标签是tr标签的子标签
input标签是td标签的子标签
3.兄弟关系:
一组标签拥有相同的父标签，并且彼此之间没有任何包含关系，即为兄弟
<body>
<div>1</div> 大哥
<p>2</p> 二哥
<span>3</span> 三弟
</body>
4.层级选择器介绍:
根据标签之间父子关系或则兄弟关系进行定位
5.简单的层级选择器
<style type="text/css">
定位父标签条件 定位子标签条件{
}
找到指定父标签下满足条件的所有子标签
</style>
自定义选择器
1.介绍：
如果一组HTML标签之间没有相同的特征，但是却需要对指定属性赋值相同内容，此时将自定义选择器绑定到对应标签上
2.语法:
<style type="text/css">
.自定义选择器名{
color:red;
}
</style>
<div class="自定义选择器名"></div>
<p class="自定义选择器名"></p>
网友评论