css设计指南第二章

CSS工作原理:找到html元素,然后设置其各种属性的机制. 可通过在head标签中通过嵌入css样式.

标签中的注释为/**/.
标签中注释为

1 为html文档添加css样式的3种方法

1 优先级最高 行内样式

通过标签内 属性

你好 css

2 优先级次之 嵌入样式






2 优先级最低 链接样式 通过标签中的子标签 引入外部css文件 .css







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 类属性

你好类属性

标签带类属性 定位某一元素

多类选择符, 可以给元素添加多个类,多个类字符串放在引号里,用空格分隔.
class属性可以有多个空格分隔的值.



//元素p的class属性 是 specialtext   featured.

Here the span1 tag may or may not be styled.

只定位第一个p元素 可以使用 .specialtext. featured{声明}.

定位类属性是specialtext 可以是用.specialtext{声明}

2.2 ID属性

ID是在页面标记中唯一地标识一个元素,所以ID具有唯一性

ID可用于页面导航

Biography

Biography

I was born when I was very young

Back to Top

//点击 第一个链接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 链接正在被点击

百度一下

ahdhakjdhjkhasjkdh

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伪类 More Information

This is the information you are looking for.

#more_info:target {background:#eee;} 效果为当用户点击 转向ID为more_info的元素时, ID为more_info的元素添加浅灰色背景 结构化伪类 :first-child :last-child 一组同胞元素中的第一个 最后一个
  1. My Fast Pony
  2. Steady Trotter
  3. Slow Ol' Nag
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

25

p.age::before {content:"Age: ";} p.age::after {content:" years.";} 最终得到的效果为: Age: 25 years.

6 多条规则都适用于同一个元素的同一属性. 最终谁胜出.CSS提供了3种机制:继承 层叠 特指

继承:可继承的属性 相当一部分跟文本相关,比如字体颜色 字体 字号
不能继承的属性:主要涉及元素盒子的定位和显示方式,比如边框 外边距 内边距

层叠:
浏览器的样式表的来源:
浏览器默认样式表
用户样式表
作者链接样式表
作者嵌入样式表
作者行内样式表

你可能感兴趣的:(css设计指南第二章)