web前端2021--小白进阶之路CSS3(1)

web前端2021–小白进阶之路CSS3(1)

CSS：Cascading Style Sheets 层叠样式表，级联样式表，简称样式表

CSS作用:修饰HTML元素的样式

HTML和CSS的关系
HTML负责页面结构的搭建，数据的承载，CSS负责改变HTML元素的外观
以HTML为基准，一层一层的编写样式

HTML属性和CSS样式
W3C建议我们尽量使用css的方式取代HTML的属性，css样式可以让代码进行重用，提供了可维护性

使用CSS样式

• 内联样式(行内样式)：在style中定义的样式
• 内部样式：在head标签中定义style标签，在style标签中定义的样式

选择器{样式声明；样式声明；…}

• 外部样式：单独创建一个css文件编写样式，在HTML中head标签中调用这个样式

 > <link rel = "stylesheet" href="my.css"/>

内联样式vs内部样式

CSS特性

• 继承性：多数样式可以被子元素继承
• 层叠性：可以为一个元素定义多个样式规则
• 优先级：当一个元素定义了多个样式，根据优先级来应用样式
  最高–内联样式
  内部样式和外部样式采用就近原则
  最低–浏览器默认样式
• 使用关键字调整样式的优先级
  !important //提升优先级
  注意：!important比内联样式的优先级还搞，内联样式中不允许添加!important

选择器

• 通用选择器

*{
   样式声明}
//css reset样式重置
*{
   margin:0;padding:0}

• 标签选择器(元素选择器)

元素名称{
   样式名称}

• id选择器(只对当前页面中的一个标签生效，使用较少)

#p1{
   样式名称}

• 类选择器

(定义页面上的一个样式片段，class调用此样式片段，可重复使用)

.类名{
   样式声明}

类选择器的特殊使用方式：
(1)多类选择器：一个class中，引用多个类名
(2)分类选择器：
标签选择器.类选择器{样式声明} //例：p.above{样式}  class为above的p标签的元素的样式
类选择器.类选择器{样式声明}  //例：big.above{样式}  class是big和above的元素的样式

• 群组选择器

选择器1 选择器2 选择器3 ...{
   样式声明}

• 后代选择器(跨代)

一级或多级的嵌套关系

选择器1 选择器2 选择器3 ...{
   样式声明}

• 子代选择器(不跨代)

一级一级嵌套

选择器1>选择器2>选择器3...{
   样式声明}

• 伪类选择器
  匹配不同状态下某个标签的样式
  (1)链接未被访问状态：link{样式声明}
  (2)链接已访问状态:visited{样式声明}
  (3)鼠标悬停状态:hover{样式声明}
  (4)元素被激活时的状态:active{样式声明}
  (5)元素获取焦点时的状态:focus{样式声明}
• 选择器的权值问题

(1)权值

!important >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器 0
继承的样式 无

(2)特点

①因为css样式有继承性，所以当多个选择器作用在同一个元素时，计算选择器权值和与冲突的样式进行比较，优先级越高(权值越大)就优先哪个css样式
②权值相同，使用就近原则
③群组选择器权值不能相加，单独计算
④样式后面添加了!important的元素直接获取最高权值，内联样式不能添加!important
⑤权值计算结果不能超过这个权值的最大数量级(1万个1加一起，也比10小)

尺寸和边框

• 元素在页面中的宽高

   width/height/max-width/min-width/max-height/min-height

注意：

①单位px/rem/% 若父元素没有具体高度，%无效
②如果给img设置最大宽度是100%，这里的100%是图片原始尺寸的100%，图片的最大尺寸不能超过图片本身的尺寸
③尺寸的单位：绝对单位 px/rem/pt/cm/mm 相对单位 em/rem/%

• 可以设置尺寸的元素：
  所有块级元素，所有行内块，所有自带宽高属性的元素
• 各个元素的默认尺寸(默认宽高)
  

溢出的处理

当内容较多，而元素区域较小时，会发生溢出的效果
一般默认纵向溢出

overflow:visible;	//默认值，溢出部分可见
overflow:hidden;	//溢出部分不可见
overflow:scroll;	//显示滚动条
overflow:auto;	    //不溢出就没有滚动条，溢出才有
overflow-x:		    //设置水平轴的滚动条
overflow-y:		    //设置水平轴的滚动条

实现横向溢出的方式：
在一个较窄的元素里，添加一个宽度较大的内容，给这个元素写溢出属性
溢出的底层，可以解决css中的特殊问题，但最佳方案都不是溢出解决

边框

• 边框的简写方式，定义上下左右边框

border:width style color; 
//最简写法：
border:style;

//style: soild实线 dotted点状虚线 dashed线状虚线 double双实线

• 单边的定义

单独定义一条边的3个属性：

border-top/bottom/left