02.CSS基本语法

标签总结

1.div 没有语义的盒子,块级元素的代表.
特点:(1) 默认宽度占据一整行
(2) 可以设置宽高
块级元素: div h1-h6 p hr form 列表元素 body 大部分的块级元素都会默认存在margin 外间距,
除了div、li、dt

2.span 没有语义的盒子,行内元素的代表.
特点:(1) 宽高由内容决定（不能设置宽高）
行内元素: 加粗(b、strong) 倾斜(i、em) 删除(s、del) img、a、input、select、textarea

CSS语法

css简介: (cascading style sheets )汉译层叠样式表

​ 层叠性：给同一个元素添加相同的css属性，属性值会存在覆盖问题

(一)css语法

​ 1.样式的固定书写格式:
选择器{声明}
2.声明的组成 css属性:属性值;
3.css注释

(二)css属性

​ 1.width 宽度
2.height 高度
3.background-color 背景颜色
4.color 字体颜色
red blue green pink

(三)三种样式表

​ 1.内部样式表 head>style[type=”text/css”]在style标签里面书写css样式.
作用域:当前页面

<style type="text/css"></style>

​ 2.外部样式表: 在css文件夹新建css文件,书写样式.
需要用到外部样式表的html文件，
head>link[href链接路径][rel=”stylesheet”][type=”text/css”]

<link rel="stylesheet" type="text/css" href="style.css" />

​ 作用域:链接到该CSS文件的所有页面

​ 3.内联样式表、行内样式表
将style作为html属性，将声明(css属性:属性值;)作为html属性值
作用域:当前元素

优先级:

​ 三种样式表的优先级: 内联样式>内部样式>外部样式
内部样式与外部样式，谁写在后面，就覆盖前面的相同
元素的相同属性

(四)选择器

​ 1.标签选择器、元素选择器、通过标签名获取到的元素
2.类选择器:通过. 类名(class名)获取到元素
[class=””]给元素添加类名(绰号),可以重复.
命名规则:英文开头，包含数字、下划线。-。
3.id选择器：通过#id名获取到元素
[id=””]给元素添加id名（身份正号码），不可重复。
4.通配符选择器*获取到页面上的所有元素
5.群组选择器、并集选择器 将多个基本选择器用逗号隔开，
表示都获取到

​ 6.伪类选择器 用冒号开头
(1) a:link 锚链接被访问前出现的样式
(2) a:visited 锚链接被访问后出现的样式
(3) E:hover 鼠标悬停在E元素上出现样式
(4) E:active 鼠标点击E元素时出现样式
lv-ha 顺序固定不能乱

​ !important用法:

div{ 
          color:red !important;
      }

​ 选择器的优先级:
!important>内联样式>id选择器>类选择器(伪类选择器)>标签选择器>通配符选择器

(五)权重

​ 只有作用到同一个元素上才能比较权重
0000
第一个0代表important或者行内样式
第二个0代表id选择器 #
第三个0代表类选择器 .
第四个0代表标签选择器 div
继承的权重最低为0000

<div class="yeye" id="grandpa ">
       <div class="baba" id="father">
           <div class="erzi" id="son">我是什么颜色</div>
       </div>
   </div>

​ 0110 （没有！important或者行内样式,1个id选择器，1个类选择器，0个标签选择器）

#father .erzi{
    color:red;
}