[前端笔记002]CSS的基础知识及选择器 -- selector

资源

  • 推荐zeal:离线文档查看器 https://zealdocs.org/
  • 推荐w3c:线上文档 https://www.w3school.com.cn/
  • 本笔记参考视频,尚硅谷:BV1XJ411X7Ud
  • 我的笔记:https://gitee.com/plusmile/stackedit-app-data.git
  • 我的CSS文件:https://gitee.com/plusmile/front-code.git
  • CSS餐厅练习:https://flukeout.github.io/,可以练习下面提到的选择器,检查自己的学习情况。

简介

  • 网页分为三个部分,结构(html)现(CSS)行为(Javascript),这章讲表现,看到的都是表现。
  • CSS全称层叠样式表,通俗的讲就是按样式表规定标签样式长啥样。
  • 注释的格式为/* 注释内容*/,可以写在style里也可以写在CSS文件中
  • CSS的基本语法为:选择器{声明块},选择器可以选中页面中的指定元素,声明块中可以定义要为元素设置的样式,声明式结构: 样式名:值;
  • CSS修改样式的方式:
  1. 内联样式,行内样式,在标签内通过style属性设置元素样式, 编写、修改比较麻烦,开发时不使用,例子如下:

    111

  2. 内部样式表,将样式编写到head中的style标签中,缺点是不同文件无法复用,例子如下:
<style>
	p{
		color:green;
		font-size:60px;
	}
style>
  1. 外部样式表,需要编写到外部的CSS文件中,文件中语法与第二种相同, 然后使用link标签引入外部的CSS文件。方便多网页复用,可以使用浏览器的缓存机制,加快网页加载速度,是最佳实践。href的值跟html笔记中a标签的值格式一样。

常用的选择器

  1. 元素选择器:根据标签名选中指定的元素
    - 语法:标签名{}
    - 例子:p{} h1{} div{} p{color: rebeccapurple;}
  2. id选择器:根据元素的id属性值选中一个元素
    - 说明:因为id不能重复,所以只能选中一个
    - 语法:#id属性值{}
    - 例子:#box{} #red{color: red;}
  3. 类选择器:根据元素的class属性值选中一个元素
    - 说明: class为标签属性,可以使用class来为不同或相同元素分组
    - 语法:.class属性值{}
    - 例子:.blue{color: red;}
    - 在标签中可以同时为一个与元素指定多个class属性,以空格隔开

    类选择器

  4. 通配选择器:选中页面中的所有元素
    - 语法:*{}
    - 例子:*{color: red;}

复合选择器

  1. 交集选择器:选中同时符合多个条件的元素
    - 语法:选择器1选择器2选择器n{}
    - 例子:div.red.a.b{color: red;}
    - 注意:元素选择器必须为开头,如果有的话
  2. 并集选择器:同时选择多个选择器对应的元素。
    - 语法:选择器名,选择器名,交集选择器{},
    - 例子:#b1,.p1,div.red{},div,p{color: red;}

关系选择器

  1. 前置关系知识:
    - 父、子关系是指父元素直接包含子元素;
    - 祖先、后代关系是指祖先元素直接间接的包含后代元素
    - 兄弟关系是指,两个元素的父元素相同
  2. 子元素选择器
    - 语法 父元素>子元素
    - 例:div>span,div.red>span,div.red>span{color: red;}
  3. 后代选择器:选后代
    - 语法:祖先 空格 后代
    - 例:div.red span{color: red;}
  4. 下一个兄弟选择器:只选择和自己最近的下一个兄弟元素
    - 语法:前一个+下一个
    - 例:p+span{color: red;}
  5. 所有兄弟选择器:选择下面的所有兄弟
    - 语法:前一个~下一个
    - 例:p~span{color: red;}

属性选择器

语法:

  • 元素名[属性名]{},选择有指定属性的元素
  • 元素名[属性名=属性值]{},选择有指定属性且等于指定值的元素
  • [属性名]{},所有有指定属性的元素
  • [属性名^=属性值],以指定值开头的元素,这里应该是正则表达式,之后再学吧
  • [属性名$=属性值],以指定值结尾的元素
  • [属性名*=属性值],属性值中包含指定值的元素
  • 例子:
p[title]{
	color: green;
}
p[title=abc]{
	color: red;
}
p[title^=abc]{
	color: blue;
}

伪类选择器

  • 伪类来描述一个元素的特殊状态,包括第一个/被点击灯
  • 语法: 使用冒号开头 :伪类名
  • 以所有子元素次序就行排序的伪类
    1. :first-child 第一个子元素
    2. :last-child 最后一个子元素
    3. :only-child 仅在别的元素内部有一个元素的元素,plate :only-child表示 plate上 只有一个元素的元素
    4. :nth-child(n) 第N个子元素,n的一些取值的含义
    - n=n,第n个元素
    - n=2n/even,偶数位元素
    - n=2n+1/odd,奇数位元素
    - n=6n+2,表示从2开始每隔6个的元素
  • 以同类型子元素次序排序
    1. :first-of-type 同类型中第一个子元素
    2. :last-of-type 同类型中最后一个子元素
    3. :nth-of-type() 同类型中第N个子元素
    4. …
    5. 类比child即可
  • 其他伪类
    1. :empty 没有子元素的元素
    2. :not() 否定伪类,将符合条件的元素从选择器中去除
    - 例子ul>li:not(:nth-of-type(3)){}不选中li的第三个元素
    3. 超链接a的伪类
    - :link 没访问过的,即正常的链接。
    - :visited 访问过的链接,由于隐私的原因,此伪类只能改链接颜色
    - :hover 表示鼠标移入,其他元素也可以
    - :active 表示鼠标点击,其他元素也可以
    - 四个的优先级正确顺序为LVHA,HA放后面才会生效
    - 例子:
a:link{
	color: blue;
}
a:visited{
	color: gold;
}
a:hover{
	color: purple;
}
a:active{
	color: chocolate;
}

伪元素选择器

  • 伪元素:内容中的特殊位置
  • 语法 双冒号::开头
  • 一些常用伪元素:
    1. ::first-letter 首字母
    2. ::first-line 第一行
    3. ::selection 选中的内容
    4. ::after 元素的最后加content的值
    5. ::before 元素的开始加content的值
    6. after与before必须与content属性联合使用
  • 例子:
::first-letter{
	font-size: 100px;
}
::after{
	content: 'as';
}

选择器的权重

  • 选择器的权重如下:
    1. 内联样式 1,0,0,0
    2. id选择器 0,1,0,0
    3. 类和伪类选择器 0,0,1,0
    4. 元素选择器 0,0,0,1
    5. 通配选择器 0,0,0,0
    6. 继承的样式 没有优先级,继承的知识看最后一节
  • 比较优先级时,将选择器优先级相加计算,高的优先显示,并集选择器单独计算
  • 优先级相同则先使用靠下的样式
  • 优先级的累加不会超过其最大数量级,即不会超过逗号,多少个id选择器优先级相加都不会大于内联样式
  • 在样式后面添加!important,则此时样式获取到最高优先级,一般不用

补充的一些基础知识

  • 继承:元素样式会默认应用在它的后代元素上,-背景、布局相关等的样式不会被继承,具体继承属性可以查文档
  • 单位:
    1. 像素:px,不同屏幕像素大小不一样
    2. 百分比:属性相对于父元素的百分比
    3. em相对于元素本身的字体大小计算,1em=1font-size,一般为16px
    4. rem相对于根元素(html)的字体大小计算
    5. 颜色rgb:RGB(R,G,B)范围0-255,或者0-100%,或#00-ff
    6. RGBA(R,G,B,A)A的范围0-1表示透明度,0表示完全透明,.5半透明
    7. 颜色HSL,不常用,H色相(0-360),S饱和度(0-100%),L亮度(0-100%)
.box{
	font-size: 30px;
	width: 100px;
	height: 10em;
	background-color: aqua;
	background-color: rgba(255, 0, 0, .5);
	background-color: #ff0000;
	background-color: hsl(20, 100%, 50%);
}

你可能感兴趣的:(前端,css,前端,css3)