CSS选择的艺术介绍
1、 CSS选择的艺术介绍：
HTML是网页制作的一个基础，为了让网页更加美观大方，我们还需要需要学习css来控制网页的外观。
HTML、CSS、JavaScript关系
-HTML是网页内容的载体
-CSS样式是表观（外观控制）
-JavaScript是行为,用来实现网也特效效果
CSS是什么?
-CSS层叠样式表格（Cascading Style Sheets）
-用于定义HTML内容在浏览器内的显示样式
CSS的作用
-CSS简化HTML相关标签，网页体积小，下载快
-解决内容与表现分离的问题
-更好地维护网页，提高工作效率
CSS基础语法
1、CSS样式规则：
CSS规则由两部分构成：选择器，声明
*需要改变选择样式的HTML元素由选择器控制
*声明由属性与值构成，后面会加；属性与值之间用：隔开
展示如下表：
|
h1 |
{color:red;font-size:14px;} |
|
选择器 |
样式分隔符/属性:(:隔开属性和值)值;(;隔开声明)/属性:值;样式分隔符 |
CSS引用：
写在<head></head>标签内：
<style type=”text/css”>
CSS样式…
</style>
*本身不区分大小写，所有的符号要在英文状态下书写
*每条另起一行便于阅读和维护
*对不同的选择器使用相同的css样式可以使用叠加的写法，例：（p,h1,h2,h3,h4{font-size:30px}）
*css注释：/*注释语句*/
2、CSS使用方法
引用css样式的方法：
- ·行内样式（内联样式）
在开始标签内添加style样式属性
如：<p style=”color:red;”>内容</p>
- ·内部样式表（嵌入样式）
内部样式（嵌入样式），把css样式代码写在:
<style type=”text/css”>
样式…
</style>
*<style>要放在<head>标签之间
*遇到低版本浏览器可能会显示标签内的内容，所以用<!--样式-->
- ·外部样式表
外部样式表，把css样式代码写在独立的一个文件中
扩展名：css文件名.css
引入外部文件：<link href=”XX.css” rel=”stylesheet” type=”text/css” />
*<link>要放在<head>标签之间
*css和html分离
*多个文件可以使用同一个样式文件
*多个文件引用同一个css文件，css只需下载一次
- ·导入式
@import “外部css样式”
<style>
@import “css.css” /or/ url(css.css);
</style>
|
类别 |
引入方法 |
位置 |
加载 |
|
行内样式 |
开始标签内style |
Html文件内 |
同时 |
|
内部样式 |
<head>中<style>内 |
Html文件内 |
同时 |
|
链入外部样式 |
<head>中<link>引用 |
*css样式文件 *与html文件分离 |
页面加载时，同时加载css样式 |
|
导入式@import |
在样式代码最开始出 |
**css样式文件 *与html文件分离 |
在读取完html文件之后加载 |
3、CSS使用方法优先级
行会样式>内部样式>外部样式
*链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
*最后定义的优先级最高（就近原则）
CSS选择器
1、 CSS选择器
-标签选择器
以HTML标签作为选择器
-类选择器
为HTML标签添加class属性
通过类选择器来作为具有此class属性的元素设置css样式（.XX）
*只要通过class属性引用类选择器设置的样式，那该标签引用相应样式
可对不同类型元素的同个名称的类选择器设置不同的样式规则（<h1 class=“xx”> / <p class=”xx” >/ h1.xx{……}）
同一个元素可以设置多个类，之间有空格隔开（<p class=“xxx xxx”>）
-ID选择器
为HTML标签添加ID属性（<p id=”xx”>）
通过ID选择器来为具有此ID的元素设置css规则（#XX）
-全局选择器
所有标签设置样式（*{…}）
-群组选择器
集体统一设置样式（p，h1，h2，h3，h4{font-size:30px}）\（p.xxx,#xxx, h4{font-size:30px}）
-后代选择器
-伪类选择器
*定义特殊状态下的样式
*无法用标签、id、class及其它属性实现
链接伪类：
链接的四种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态
|
伪类 |
说明 |
|
:link |
未访问的链接 |
|
:visited |
已访问的链接 |
|
:hover |
鼠标的悬停状态 |
|
:active |
激活的链接 |
格式:（ xx:link{}… ）
书写顺序: :link>:visited>:hover>:active
-a:hover必须置于a:link和a:visited之后，才有效
-a:active必须置于a:hover之后，才有效
-伪类名称对大小写不敏感
*IE6及更早版本，支持<a>元素的4种状态
*IE6浏览器不支持其他元素的:hover和:active
CSS继承、层叠和优先级
1、 CSS继承和层叠
Css继承：从父元素那继承部分css属性，子元素可以继承部分属性
Css层叠：可以定义多个样式，不冲突时可以将多个样式层叠为一个，冲突时按不同样式规则优先级来应用样式
2、 CSS优先级
行内样式>内部样式>外部样式
说明：
- 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
- 最后定义的优先级最高（就近原则）
Id选择器>class选择器>标签选择器
同类样式多次引用，样式表中后定义的优先级高
同意样式表中：
- 权值相同
就近原则（离被设置元素越近优先级越高）
- 权值不同
根据权值来判断css样式
哪种css样式权值高，就使用哪种样式
选择器权值：
-标签选择器：权值为1
-类选择器和伪类：权值为10
-ID选择器：权值为100
-通配符选择器：权值为0
-行内样式：权值为1000
权值规则
-统计不同选择器的个数
-每类选择器的个数乘以相应权值
-把所有的值相加得出选择器的权值
!important规则
-可调整样式规则的优先级
-添加再样式规则之后，中间用空格隔开（div{xx:xxx !important;}）
总结
-!important声明高
-css使用方法的优先级
*行内样式>内部样式>外部样式
*link链入外部样式和style内部样式优先级、取决于先后顺序
样式表中优先级
*id选择器>class选择器>标签选择器>通配符
CSS应用
1、 CSS样式命名
css样式命名规则
-才用英文字母、数字以及“-”和“_”命名
-以小写字母开头，不能以数字和“-”、“_”开头
-命名形式：单字、连字符，下划线和驼峰（special、mainTitle、main-title、main_title）
-使用又意义的命名
1） 页面结构
|
页面结构 |
|
|
页头 |
header |
|
页面主体 |
main |
|
页尾 |
footer |
|
内容 |
content/container |
|
容器 |
container |
|
导航 |
nav |
|
侧栏 |
sidebar |
|
栏目 |
column |
|
页面外围控制 |
wrapper |
|
左右中 |
left right center |
2）导航
|
导航 |
|
|
导航 |
nav |
|
主导航 |
mainnav |
|
子导航 |
subnav |
|
顶导航 |
topnav |
|
边导航 |
sidebar |
|
左导航 |
leftsidebar |
|
右导航 |
rightsidebar |
|
菜单 |
menu |
|
子菜单 |
submenu |
|
标题 |
title |
|
摘要 |
summary |
3)功能
|
功能 |
|
|
标志 |
logo |
|
广告 |
banner |
|
登录 |
login |
|
登陆条 |
loginbar |
|
注册 |
register |
|
搜索 |
search |
|
功能区 |
shop |
|
标题 |
title |
*id不要滥用，谨慎使用
*适当使用class
字体样式
1、 CSS字体样式
-字体：font-family（font-family:”字体名称”;）
*含空格字体名和中文，用英文引号（“）括起
*多个字体，用英文逗号（,）隔开
*引号嵌套，外使用双引号，内使用单引号
*字体集：serif和sans-serif区别
-文字大小：font-size
相对
|
属性值 |
说明 |
|
In |
Inch，英寸 1英寸=2.45厘米 |
|
Cm |
厘米 1厘米=0.394英寸 |
|
Mm |
毫米 1毫米=0.1厘米 |
|
Pt |
磅，印刷的点数 72磅=1英寸 |
|
属性值 |
CCS2缩放系数1.2 |
|
xx-small |
9px |
|
x-small |
11px |
|
small |
13px |
|
medium |
16px |
|
large |
19px |
|
x-large |
23px |
|
xx-large |
28px |
绝对单位：绝对大小，不能随浏览器分辨率或父元素大小的改变而改变
-px像素
-em/%都是针对父元素
-文字颜色：color
-颜色名
-十六进制
-RGB
-文字粗细：font-weight
为元素文字设置粗细
语法：normal、bold、bolder、lighter、100~900
-文字样式font-style
语法：normal、italic、oblique
-字体变形font-variant
设置元素中文本为小型大写字母
语法：normal、small-caps（小型大写字母）
文本样式
1、 CSS文本样式
text-align：设置元素内文本的水平对齐方式
语法：left、right、center、justify /*该属性对块级元素设置有效
line-height：长度值/百分比
vertical-align属性
设置元素内容的垂直方式
语法：baseline、sup、sub、super、top、text-top、middle、bottom、text-bottom
Word-spacing：设置元素内单词之间间距
Letter-spacing：设置元素内字母之间间距