CSS Day-01

前端三要素
html css javascript

一.什么是css？
cascading style sheets 层叠样式表。
二.css语法
1.属性名和属性值之间使用：隔开
多对属性使用；隔开 最后一对可以不加
id class title可以随意设置属性
style根据css语法设置

2.速记语法/简写
eg：border:1px solid red;

border-width:1px;（仍是简写）
border-style:solid;
border-color:red;

盒子=内容区+内边距（padding）+外边距（margin）+边框

eg：padding：10px(上下） 20px（左右）;
padding:10px（上） 20px（左右） 10px（下）；
padding:10px（上） 30px（右） 10px（下） 40px（左）;

3.注释
（1）写法
/内容/
（2）作用
对代码解释说明
对代码进行更好的维护和管理
（3）注释不能进行嵌套

三.html中引入css的方法
1.行内样式

2.内联样式

3.外部引入
Link标签

《css优先级问题》
行内样式>内联样式/外部引入
内联/行内就近原则：
更靠下的优先级更高，哪一种设置方式更靠近元素哪一种优先级更高。

4.选择器
（1）标签选择器
根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
根据标签名称选择一类元素
eg:div{
}
（2）id选择器
根据一个id选择一个元素，然后设置属性
eg：#one
（3）类选择器
根据指定的类名称找到对应的标签, 然后设置属性
eg: .class(具有class属性的一类元素）
（4）普遍选择器
作用: 给当前界面上所有的标签设置属性

• （选择所有）
  （5）后代选择器
  a.>连接两个选择器 选择直接子元素，不包含其他后代
  b. 空格连接两个选择器 选择所有后代元素
  （6）兄弟选择器
  +：选择当前元素之后的一个兄弟元素
  ~:选择当前元素之后的所以兄弟元素
  （7）属性元素
  [class]选择当前页面中具有class属性的元素
  [class=“one”]选择当前页面中具有class属性，属性值为one
  [class~=“one”]选择当前页面中具有class属性，属性值之一为one的元素
  [class^=“o”]选择当前页面中具有class属性,开头为o的元素
  [class$=“o”]选择当前页面中具有class属性，以o结尾的元素
  [class*=“o”]选择当前页面中具有class属性，包含字符o的元素
  （8）多选择器
  逗号隔开多个选择器
  （9）组合选择器
  多个选择器组合到一起使用
  （10）伪类选择器
  :伪类名称
  eg：
  :first-child
  :last-child
  :nth-child(number)
  （11）伪元素选择器
  ::伪元素名称
  eg:
  ::first-letter
  ::first-line

《选择器优先级问题》
优先级根据特性值计算
特性值越大，优先级越高
!important不计入计算，优先级最高
相同特性值，越靠下优先级越高

行内属性 1000
id选择器 100
类/属性/伪类选择器 10
元素/伪元素 1

CSS三大特性
继承 优先级 层叠