css
本文对css一些基础部分进行了简单介绍。
相信大家都知道一个基本网页的组成结构有三部分：
- 结构层
- 样式层
- 行为层
什么是 CSS?
CSS 指：层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
css的优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富额样式，使得页面的布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用于独立于页面css，有利于网页被搜索引擎收录
- css3提供更加强大的功能
css规则：选择器+一条或多条声明
选择器 声明 声明
h1 {color:blue;font-size:12px;}
属性 值 属性 值
- 选择器通常是需要改变样式的html元素
- 每条声明有一个属性和一个值组成
属性（propetry）是希望设置的样式属性（style attribute），每个属性有一个值，属性和值用冒号分开。
css注释
/*这是一条注释*/
id 和class选择器和标签选择器
如果你需要在html中设置css样式，你需要在元素中设置 id 和class 选择器
id选择器
id选择器可以为特定的html元素指定特定的样式
html元素以id属性来来设置id选择器，css中id 选择器通过#来定义
<style>
#idselector
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="idselector">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
class选择器
class 选择器用于描述一组元素的样式，class与id选择器有所不同(因为html中id是唯一的，所以id选择器只能给特定的标签添加样式)，class选择器可以在多个元素中使用，class选择器在html中以class属性表示，class选择器以一个点.号显示
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
给指定的html元素使用class="center",只需要在.前加上这个元素
p.center {text-align:center;}
标签选择器
标签选择器会应用与所有该标签
p{
color:"red"
}
<title>不会应用到title</title>
<p>应用于p标签</p>
css 创建
当读到一个样式表时，浏览器会根据它来格式化html文档
插入样式表
插入样式表方法：
- 外部样式表（External style sheet）
- 内部样式表（interna style sheet）
- 内联样式（inline style）
外部样式表
当样式需要应用于多个页面时，外部样式表是理想的选择，在外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观，在页面中使用link标签链接到样式表，link标签在页面的头部
链接式和导入式的区别（link 和@import）：
- link 属于 XHTML @import 属于 css2.1
- 使用link链接的css文件先加载到网页中，再进行编译显示
- 使用@import导入的css文件，客户端显示html结构，再把css文件加载到页面中
- @import是属于css2.1特有的，对于不支持兼容css2.1来说是无效的，在css文件中@import放在头部
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式
在该页面上的head标签里添加style标签,css代码写在style标中
优点：方便在同页面中修改样式
缺点：不利于在多个页面中共享复用代码和维护，对内容和样式的分离也不够彻底
css复合选择器
- 后代选择器（空格）
- 交集选择器（紧挨着）
标签+class or id - 并集选择器（逗号） 所有的选择器都能实现后面的样式
通配符 *
表示所有元素
*{
font-size:16px;
color:green;
font-weight:normal;
}
css的特性
- css继承特性
- 子标签可以继承父标签的样式风格
- 子标签的样式不会影响父标签的样式风格
- 不是所有的样式都能继承
- css 层叠特性
- css样式属性设置发生冲突时，需要根据权重决定属性值
多重样式优先级
一般情况下：
内联样式 lnline style >内部样式 inner style sheet>外部样式 external style sheet>浏览器默认样式
选择器的权重
- ！important 权重最大
- 行内 选择器权重为1000
- id 选择器 权重为0100
- class 选择器权重为0010
- 标签 选择器权重为0001
- 伪类 权重为0001
权重计算基本规则
- 根据权重计算结果的大小决定具体生效的样式
- 如果权重值相同，以写在后面的样式为准
权重计算其他规则
- 通过继承生效的样式权重为0
- 如果权重都为0，以靠近标签的样式为准；一样近时在根据选择器权重计算规则
- ！important具有最高权限
css权重计算规则总结
网友评论