CSS工作原理:找到html元素,然后设置其各种属性的机制. 可通过在head标签中通过<style></style>嵌入css样式.
<style></style>标签中的注释为/**/.
<body></body>标签中注释为
1 为html文档添加css样式的3种方法
1 优先级最高 行内样式
通过标签内 属性
<p style="font-size:12px; font-weight:bold; color:red;">你好 css</p>
2 优先级次之 嵌入样式
<head>
<style>
p{font-size:12px; font-weight:bold; color:red;}
</style>
</head>
2 优先级最低 链接样式 通过<head></head>标签中的子标签<link=> 引入外部css文件 .css
<head>
<link href="mydiv.css" rel="stylesheet" type="text/css" />
</head>
2 CSS规则
由选择符和声明两部分组成,基本结构如下:
p{color:red;}
基本结构的三种扩展如下:
1 多条声明包含在一条规则里
p{color:red; font-size:12px; font-weight:bold}
2 多个选择符共用一条声明
p, h1, h2{color:red;}
3 多条规则共用一个选择符
p, h1, h2{color:red;font-size:12px;font-weight:bold}
p{font-style:italic}
2 用于选择指定元素的选择符分为三种
- 上下文选择符
- ID选择符和类选择符
- 属性选择符
1 上下文选择符, 标签1 标签2 {声明}, 标签2 是我们选择的指定元素,且其祖先元素是标签1.
1.1 子选择符, 标签1 > 标签2 {声明}, 标签2 是我们选择的指定元素,且其父元素必须是标签1
1.2 紧邻同胞选择符, 标签1 + 标签2 {声明}, 标签2必须紧跟在其同胞标签1后面
1.3 一般同胞选择符, 标签1 ~ 标签2 {声明}, 标签2必须 跟在其同胞标签1后面(不一定紧跟)
1.4 通用选择符 *, 是一个通配符,其匹配任何元素.
*{color: red;}
//导致所有元素的文本和边框都变成红色.
1.5 通配符一般都会选择一个标签
p *{color: red;}
//导致p标签包含的所有元素的文本和边框都变成红色.
2 ID和类选择符
可以给ID和类设定任何值,但是不能以数字或特殊字符开头.
2.1 类属性
<div class="myclass">你好类属性</div>
<style>
.myclass{font-size:12px;}
</style>
标签带类属性 定位某一元素
多类选择符, 可以给元素添加多个类,多个类字符串放在引号里,用空格分隔.
class属性可以有多个空格分隔的值.
<p class="specialtext featured">Here the span tag <span>may or may not</span> be styled.</p>
//元素p的class属性 是 specialtext featured.
<p class="specialtext">Here the span1 tag <span>may or may not</span> be styled.</p>
<p class="featured">Here the span2 tag <span>may or may not</span> be styled.</p>
只定位第一个p元素 可以使用 .specialtext. featured{声明}.
定位类属性是specialtext 可以是用.specialtext{声明}
2.2 ID属性
ID是在页面标记中唯一地标识一个元素,所以ID具有唯一性
ID可用于页面导航
<a href="#bio">Biography</a>
<h3 id="bio">Biography</h3>
<p>I was born when I was very young</p>
<a href="#">Back to Top</a>
//点击 第一个链接a 会跳转到 id属性为 bio的h3标签
//点击最后一个链接a 会跳转到页面顶部,常用语博客内的导航.
3 属性名选择符 标签名[属性名]
img[title] {border:2px solid blue;} //带有title的img的元素 其边框会发生对应的变化, 不关心title属性的具体内容,只要有这个属性即可
4 属性值选择符 标签名[属性名="属性值"]
img[title="加油"] {border:2px solid blue;}
综上发现 以上这些都是针对标记中的某些元素,当某些事件发生时,动态地改变元素的样式,比如用户的鼠标悬停在链接上,你要改变该链接的样式,这就需要/伪类/实现.
5 伪类 UI伪类 结构化伪类
UI伪类:
1 链接伪类
link 用户未点击
visited 用户已点击过
hover 鼠标悬停在链接上方
active 链接正在被点击
<a href="www.baidu.com">百度一下</a>
<p>ahdhakjdhjkhasjkdh</p>
a:link {color:black;}
a:visited {color:green}
a:hover {color: hotpink;}
a:active {color: red;}
p:hover {color: hotpink;} 悬停在段落p上时 文本颜色改变
2 :focus伪类
input:focus {border:1px solid blue;}
光标位于input字段中时,为该字段添加蓝色边框,这样让用户明确知道添加的字段在哪里.
3 :target伪类
<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2>
#more_info:target {background:#eee;}
效果为当用户点击 转向ID为more_info的元素时, ID为more_info的元素添加浅灰色背景
结构化伪类
:first-child :last-child 一组同胞元素中的第一个 最后一个
<ol class="results">
<li>My Fast Pony</li>
<li>Steady Trotter</li>
<li>Slow Ol' Nag</li>
</ol>
ol.results li:first-child{color:red}
ol.results li:last-child{color:red}
:nth-child(2) {color:red} //Steady Trotter字体颜色改为红色
伪元素:
p::first-letter {font-size:300%;} //段落p首字母放大效果
p::first-line {font-size:300%;} //段落p第一行放大效果
::before ::after
<p class="age">25</p>
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
最终得到的效果为: Age: 25 years.
6 多条规则都适用于同一个元素的同一属性. 最终谁胜出.CSS提供了3种机制:继承 层叠 特指
继承:可继承的属性 相当一部分跟文本相关,比如字体颜色 字体 字号
不能继承的属性:主要涉及元素盒子的定位和显示方式,比如边框 外边距 内边距
层叠:
浏览器的样式表的来源:
浏览器默认样式表
用户样式表
作者链接样式表
作者嵌入样式表
作者行内样式表
