Css样式（cascading style sheet） 层叠样式表
Body a .box{ }
Css的目的：给html加各种各样的样式----html结构和css样式样式分离---便于维护更新
Css语法
选择器{
属性名:属性值;属性名:属性值;
}
说明：
l 一个css样式包括选择器和格式声明语句
l 选择器就是选择给哪个html标签加样式
l 格式声明语句包括 属性名:属性值;
l 格式声明语句要用{ }
l 属性名，w3c已经定义好，想用的时候，直接使用
l 属性值不用双引号
l 属性值的有单位是通常是以像素px为单位,通常的情况下必须带单位
如何在html结构中引入css样式
1. 行内样式表：临时做测试用
每一个标签都有style属性
格式:<标签style=”属性名:属性值;”>内容</标签>
行内样式，只能应用当前文档中的当前对应的html标签加样式，或者里面包含的标签加该样式
2. 内嵌样式表：常用的一种
格式:在head标签中输入style
<style type=”text/css”>
选择器{属性名:属性值; }
</style>
内嵌样式：在当前的文档可以使用该样式，需要的时候可以使用
3. 外部样式表常用的一种
格式:<link rel=”stylesheet” href=”外部样式表文件 xx.css” type=”text/css”/>
保存的时候扩展名为.css文件
第一步，建立一个css页面，保存为扩展名为.css文件（直接写css代码）
第二步在不同的页面引入 <link rel=”stylesheet” href=”外部css文件的地址” />
可以应用多个文档，哪个html标签需要用，就可以引入
4. 导入样式表：管理css样式
格式:@import url(另外一个css样式)
注意 @import是css样式标签，所以必须放到css文件中
必须放到css样式表的最上面 例如
选择器的分类
基本选择器
u 标签选择器：选择给哪个标签加样式，自动指向该标签
语法：标签选择器名{属性:属性值; }
body { } p{ } div{ } table{ } td{ } ul{ }
注意 ：不用引用，把样式自动套到对应的标签，所以的对应标签都加上该样式
u 类选择器：给一类html标签加样式
语法： 类选择器名{属性：属性值; }
选择器名是自己定义，要起得有意义
类用 .来表示
例如: .myclass{ } .page_header1{ } .login-content-input{ }
必须的引用，每一个标签都有一个class属性
<标签 class=”选择器名”> </标签>（多对多）
注意：类选择器可以引用多次；一个元素可以对多个class，一个class可对多个元素
u Id选择器：给特定的html标签加样式
格式:id选择器名{属性:属性值; }
Id 用#来表示
选择器名自定义，要起得有意义
例如 #myid{ } ,#id1 #checkform1{ }
Id必须的引用 引用的方法，每一个标签都有id属性
<标签 id=”选择器名” ></标签>（一对一）
注意：id只能引用一次，表示唯一，通常id给javascript用，不是用来设置样式的，如果想设置样式，用类选择器
!important>行间样式>id>class|属性选择器>标签
u 通用选择器：（*所有）给所有的标签加样式，通配符
Html body ptable ul li ol…..给所有的html标签加样式
语法： *{属性:属性值; }
不是所有的浏览器都支持，Ie6版本不支持
复合选择器
多/分组 元素选择器：多个标签共有的属性和属性值，放到一起
语法：选择器，选择器，选择器……..{共有的属性：属性值; }
父子/派生选择器：给html的所有后代标签加样式（自右向左的顺序）
语法：选择器1 选择器2 选择器3 { 属性:属性值; }
注意：父子选择器不固定标签/选择器，只在意父子关系成立即可。选择器之间用空格隔开
Div的后代标签 <h3> <ul> <li> <b>
<div >
<h3>PS免费公开课每日早中晚讲足6小时</h3>
<ul>
<li>最近惊现一批<b>“人造美人”，</b>你认为谁最美呢</li>
<li>最近惊现一批“人造美人”，你认为谁最美呢</li>
<li>最近惊现一批“人造美人”，你认为谁最美呢</li>
</ul>
</div>
直接子元素选择器 :给html标签的子标签加样式
格式:选择器>选择器{属性:属性值; }
某个标签里面的第一层
<div class=”news” >
<h3>PS免费公开课每日早中晚讲足6小时</h3>
<ul>
<li>最近惊现一批<b>“人造美人”，</b>你认为谁最美呢</li>
<li>最近惊现一批“人造美人”，你认为谁最美呢</li>
<li>最近惊现一批“人造美人”，你认为谁最美呢</li>
</ul>
</div>
.news>h3{color:blue; } .news h3{color:blue; }
Ul>li{color:red; }
并列选择器
并列选择器类名与类名之间用','隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*并列选择器*/
.box1,.box2{
width: 300px;
line-height: 200px;
background-color: pink;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1">
https://blog.csdn.net/muzidigbig
</div>
<div class="box2">
https://blog.csdn.net/muzidigbig
</div>
</body>
</html>伪类选择器：----锚<a>
a:link 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移动链接上
a:active 单击鼠标左键的那一时刻的样式
css权重
!important Infinity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
infinity正无穷
由上到下权重减小
同一个横行的选择器把他们的权重相加，渲染/显示权重大的那个，权重大小一样后面覆盖前面
若有不足请多多指教！希望给您带来帮助！
共同学习，写下你的评论
评论加载中...
作者其他优质文章
