CSS基础知识一

知识点导航

* CSS初步认识
    1.整体感知
    2.常见属性
* CSS基础选择器
    1.标签选择器
    2.id 选择器
    3.类选择器
* CSS高级选择器
    1.后代选择器
    2.交集选择器
    3.并集选择器
    4.通配符 *        
* CSS3部分选择器
    1.儿子选择器 ( IE7开始兼容 )
    2.序选择器 ( IE8开始兼容 )
    3.下一个兄弟选择器 ( IE7开始兼容 )
* CSS的继承性和层叠性
    1.继承性
    2.层叠性(权重初识)

一、CSS初步认识

HTML 超文本标记语言  从 语义 的角度描述页面 结构
CSS  层叠样式表     从 审美 的角度描述页面 样式
JS   JavaScript   从 交互 的角度描述页面 行为
  • CSS整体感知

css 是 cascading style sheet 层叠式样式表的简写

  
    
  `

前期书写css的地方为 style 标签,包裹在 head 内,从代码中可以看出,css 也是纯文本文件

注意
css对换行不敏感,对空格也不敏感,但是 冒号和分号不能省略


  • CSS常见属性

字体颜色
color: red;
字体大小
font-size: 40px;
背景颜色
background-color: blue;
加粗
font-weigh: bold;
不加粗
font-weigh: normal;
斜体
font-style: italic;
不斜体
font-style: normal
下划线
text-decoration: underline;
无下划线
text-decoration: none;


二、CSS基础选择器

css主要的两部分知识点:
1. 选择器 (怎么选)
2. 属性 (长啥样)

1.标签选择器

   
  

红色

通过标签的类型来选中标签,所有的标签都可以是标签选择器,它选中的是页面上所有这种类型的标签,所以经常用来描述“共性”,无法描述“个性”

2.id 选择器

我是段落 1

我是段落 2

我是段落 3

id 选择器的选择符是 “#”
每个标签都有 id 这个属性,表示这个标签的名字

id 命名规范
1.只能有字母,数字,下划线
2.必须以字母开头
3.不能和标签同名
4.大小写敏感
5.不能重名

3.类选择器

我是段落 1

我是段落 2

我是段落 3

我是段落 4

`

类选择器的选择符是 “ . ”
任何标签都可以有 class 属性,这个属性可以重复

说明
1.class 属性可以重复(id 属性不可以)
2.同一个标签可以同时属性多个类,用空格隔开

我是段落 2

到底用 class 还是 id 呢?
css 一般情况下尽量使用 class, 除非极特别情况下需要使用 id,因为 id 一般是给 js 用的

三、CSS高级选择器

1.后代选择器


后代选择器的选择符是 空格“ ”
不仅仅是儿子,是所有的后代

2.交集选择器

CSS基础知识一_第1张图片
交集

交集选择器的选择符是 “选择器.选择器”
中间是英语的句号“.”, 具体可以参考数学中交集的写法

书写规范
1.尽量不要连续交集 (div.special.span )
2.一般都是以标签开头 (div.special )

3.并集选择器(分组选择器)


并集选择器的选择符是 “选择器,选择器”
中间为英文的逗号“,”

4.通配符 *

* 表示所有的元素

*{
} 

标签越多,效率越低,故一般不使用通配符

四、CSS3部分选择器

1.儿子选择器

div>p{
}

儿子选择器的选择符是大于号“父类选择器>儿子选择器”
只能选择儿子,不能选择孙子及之后的后代
IE7开始兼容,IE6不兼容

2.序选择器

ul li:first-child{
}
ul li:last-child{
}

IE8开始兼容,IE6、7不兼容
如果要兼容IE6、7,则可以通过给第一个和最后一个添加class 属性来达到序选择器的效果

3.下一个兄弟选择器

div+p{
}

下一个兄弟选择器的选择符是加号“兄弟选择器+下一个兄弟选择器”
选中下一个兄弟的选择器
IE7开始兼容,IE6不兼容

五、CSS的继承性和层叠性

  • 继承性

当设置自己的某一些属性时,自己的后代默认也设置了的这些属性,这就是继承性
哪些属性能继承?
*关于文字样式的都能继承(color、text-开头的、line-开头的、font-开头的)
*关于盒子的,定位的,布局的属性都不能继承

  • 层叠性

css处理冲突的能力,也就是选择器权重的计算,没有任何兼容问题
计算权重的一个大前提:选中了该标签,如果没有选中特定标签,权重永远为 0
选择器权重计算方式(前提:选中了该标签)
*核心公式:id 的数量,类的数量,标签的数量
*id 权重 > 类的权重 > 标签的权重
*255个标签等于一个类名,无实战意义,几乎等于不进位
*若权重一样,谁后写听谁的
*继承不影响权重,即若未选中标签,权重永远为0
*若没有选中标签,就近原则

权重总结:

1.先看选择器有没有选中指定标签,如果选中了,那么以(id 数,类数,标签数)来计算权重,谁打听谁的;如果权重一样,那么谁后写听谁的
2.如果没有选中,那么权重为0,就近原则

你可能感兴趣的:(CSS基础知识一)