Web前端自学记录(二)(CSS基础知识)

CSS基础知识

1.CSS简介

网页分成3各部分

结构(HTML)
表现(CSS)
行为(JavaScript)

CSS

层叠样式表
网页实际上是一个多层的结构,通过CSS为网页的每一层设置样式
用来设置网页中元素的样式

使用CSS修改元素的样式

第一种方式:内联样式/行内样式
   在标签内部通过style属性设置样式
   问题:
       内联样式只能对一个标签生效
       当样式发生变化时,需要一个一个修改
   注意:开发时不要使用内联样式
第二种方式:
   将样式编写到head中的style标签里
   通过CSS的选择器来选中元素并为其设置各种样式
   可以同时为多个标签设置样式,修改时同时修改
   更方便重复使用
   问题:内部样式表只能对一个页面起作用
第三种方式:外部样式 最佳方式
   可以将CSS样式编写到外部的CSS文件中
   然后通过link标签引入外服的CSS文件
   外部样式表需要通过link标签引入,可多个页面之间进行复用
   将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制,加快加载速度

2.CSS语法

CSS基本语法:

 选择器:通过选择器可以选中页面中的指定元素
 比如:p
 声明块:通过声明块为元素设置样式
 声明块由一个个声明组成
 声明时一个名值对结构
 一个样式名对应一个样式值 用:链接 以;结尾

3.常用选择器

元素选择器

作用:根据标签名选中指定的元素
语法:标签名{}
例子:p{} h1{} div{}

ID选择器

作用:根据元素的id值选中一个元素
语法:id属性值{}
例子:#red{}

类选择器

作用:根据元素的class属性值设置一组元素
语法:.class属性值{}
可以同时为一个元素指定多个class

通配选择器

作用:选中页面中的所有元素
语法:*{}

4.复合选择器

交集选择器

作用:选中同时复合多个条件的元素
语法:选择器A选择器B...
注意:交集选择器中如果有元素选择器,必须用元素选择器开头

并集选择器

作用:同时选择多个选择器对应的元素
语法:选择器A,选择器B

5.关系选择器

子元素选择器

作用:选中指定父元素的指定子元素
语法:父元素>子元素
div>span{color:orange;}

后代元素选择器

作用:可以选中指定元素内的指定后代元素
语法:祖先 后代
div span{color: skyblue;}

选择下一个兄弟

语法:前一个+下一个
p+span{color: red;}

选择下边所有的兄弟元素

p~span{color: red;}

6.属性选择器

[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性值的元素
[属性名^=属性值]选在属性值以指定值开头的元素
[属性名$=属性值]选择属性值以指定值结尾的元素
[属性名*=属性值]选择属性值中含有某值的元素

7.伪类选择器

伪类(不存在的类)

伪类用来描述一个元素的特殊状态 比如:第一个子元素、被点击的元素
伪类一般情况下都是用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child()选中第n个子元素
特殊值:
       n 第n个 n的范围0到正无穷
       2n或even 表示选中偶数位的元素
       2n+1或odd 表示选中奇数位的元素特殊值:
以上这些伪类都是根据所有的子元素进行排序的

:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似,不同点是他们在同类型元素中进行排序

:not() 否定伪类
将复合条件的元素从选择器中去除

8.超链接的伪类

几种常用的超链接伪类

:link 用来表示没访问过的链接(正常的链接)
:visited 访问过的链接 由于隐私的原因,所以visited这个伪类只能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 鼠标点击的状态

9.伪元素选择器

伪元素,表示页面中一些特殊的并不真实存在的元素(特殊的位置) 使用::开头

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
before和after必须结合content属性来使用
div::before{
     content:"abc";
     color:orange;
 }

10.继承

样式的继承

我们为一个元素设置样式同时也会应用到它的后代元素上
继承是发生在祖先元素的后代元素之间的
继承的设计是为了方便我们的开发,利用继承我们可以将一些通用的样式设置到祖先元素上

注意:并不是所有样式都会被继承
比如 背景相关的,布局相关等的这些样式都不会被继承

11.选择器的权重

样式的冲突

通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值,此时就发生的样式的冲突
发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定

选择器的权重

内联样式        1000
id选择器        100
类和伪类选择器   10
元素选择器       1
通配选择器       0
继承的样式       没有优先级
注:数字仅用来表示权重的大小比较,没有实际意义

比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器时单独计算的)
选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
如果优先级计算后相同,则优先使用靠下的样式

可以在某一个样式后边添加!important,则此时该样式会获取到最高的优先级
注意,在开发中慎用

12.单位

长度单位:

像素
   屏幕(显示器)实际上是由一个一个小点点构成的
   不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
   所以同样的200px在不同的设备下显示的效果不一样
百分比
   百分比可以设置属性相对于父元素属性的百分比
   设置百分比可以使子元素跟随父元素的改变而改变
em
   em是相对于元素的字体大小来计算的
   1em = 1font size
   em会根据字体大小的改变而改变
rem
   rem是相对于根元素(html)的字体大小来计算的

13.颜色

颜色单位

在CSS中可以直接使用颜色名设置各种颜色 比如:red、orange、yellow......
但是在CSS中直接使用颜色名非常不方便

RGB值
   RGB通过三种颜色不同的浓度表示不同的颜色
   R:red G:green B:blue
   每一种颜色的范围在0~255之间或0%~100%
   语法:RGB(红色,绿色,蓝色)
RGBA
   在RGB的基础上增加了A表示不透明度
   需要4个值R G B A
   A的值在0~1之间 1表示完全不透明 0表示完全透明
十六进制RGB值
   语法:#红色绿色蓝色
   颜色浓度通过00~ff表示
   如:红色 #ff0000
   如果两位两位重复,可以简写成#f00
HSL值 HSLA值
   H 色相(0~360)
   S 饱和度:颜色浓度(0%~100%)
   L 亮度(0%~100%)

后续会持续更新

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值