前端学习日记（三）css的概念、语法、作用、选择器

html:建房子
css:装修

1. 什么是css？

层叠样式表（cascading style sheet）
css不能脱离html页面而单独存在。

2. 语法
1）属性的设置
属性名与属性值之间使用冒号分割
多对属性之间使用分号分割
最后一对属性可以不加分号

  1.style
    

  2.其他
    代码块
    选择器{
      width：100px；
      height：100px；
      background-color：red；
    }

2）注释
-1写法

/*注释内容*/

-2作用
增加代码的可读性，便于维护代码的管理
-3注意
css中的注释不可以嵌套使用
3）速记写法
简写形式

 top bottom left right
  padding-top:10px 上内边距
  padding-bottom:10px 下内边距
  padding-left:10px 左内边距
  padding-right:10px 右内边距
  padding：10px；//上下左右的内边距均为10
  padding：10px 20px； //10px代表上下 20px代表左右 属性值之间使用空格隔开
  padding：10px 20px 30px ；//上10px 左右20px 下30px
  padding：10px 20px 30px 40px；//上10px 右20px 下30px 左40px 按照顺时针的原则
  margin-top：
  margin-bottom：
  margin-left：
  margin-right：
  margin：padding；
  margin：0 auto；//上下为0 左右自动居中；设置给具有宽度的块级元素时，元素可在父元素中自动居中
  border：1px solid red；//边距为1，颜色为红色
     border-width：
     border-style：
     border-color：
          border-top-width：
          border-top-style：
          border-top-color：

3.css作用到html上
1）行内样式
写在标签内部的style属性上
2）内嵌式/内嵌样式表
在head内部使用style标签设置
3）外部样式表(建议使用)
当前html文件外部，创建一个css文件
.css为文件后缀名即可
-1 link
建议使用link标签
优先加载html
-2 @import
优先加载css
优先级：行内样式>内嵌式=外部引入
结论：
就近原则：哪一个样式距离html元素更近，谁的优先级更高。
4.选择器
1） 标签选择器：通过标签名称选择一类元素

  div{}
  span{}
  p{}

2） id选择器：通过id属性选择一个元素

 #one：id='one'

3）类选择器：

 class：通过class属性选择一类元素
 .one:class='one'

4）普遍选择器：

 *
 选择所有
 
 *{
 margin:0px;
 padding:0px;
 }

5）后代选择器：

 空格：选择所有后代元素
 >:选择直接子元素

6）兄弟选择器：

+：选择当前元素之后的一个兄弟元素
~：选择当前元素之后的所有兄弟元素

7）组合选择器：

div  #one  .one
div#one 选择所有div标签并且div标签中id为one的元素
div.one 选择所有div标签并且div标签中class为one的元素
div.one p 选择所有div标签并且div标签中

8）多选择器：

div，p，span，#one，.one{
}

9）属性选择器：
根据元素的属性来选择一类元素

[id]：具有id属性的
[id="one"]选择当前页面具有id属性，并且属性值为one的
[class~=“one”]：选择具有class属性并且具有之一为one的
[class^="o"]：具有class属性，并且属性值以o开头的
[class$="o"]：具有class属性，并且属性值以o结尾的
[class*="o"]：具有class属性，并且属性值包含o字符的

10）伪类选择器

div class=“one”
.one
：伪类名称
：first-child
：last-child
：nth-child（num/odd奇数/even偶数）
：first-of-type
：last-of-type
a：
：link：未点击状态
：hover：悬停状态
：active：鼠标按下状态
：visited：点击之后的状态
如果想要四个状态设置为同一个元素，按顺序写：link->visited->hover->active

11）伪元素选择器：

：：伪元素名称
：：first-letter
：：first-line
：：before
      cotent：''/url（）
：：after
：：sellection
hello
style:
   .one{
     color:red
   }
   

5.选择器的优先级

！important；//不计入优先级的计算，优先级最高
建议少用！

特性值的计算：
特性值越高，优先级越高
特性值相同，谁更靠近html，谁的优先级越高

写在**style属性**内部：1000
**id**选择器：100
**类/伪类/属性**选择器：10
**标签/伪元素**：1

6.继承

1)有些默认继承父元素
有些不继承
2)属性
1>inherit 继承父元素的样式
2>initial 不继承。应用浏览器的默认样式
7.尺寸+颜色-单位
尺寸：
1）绝对单位

px

2）相对单位

 百分比
 em
 1em~1个M的宽度（16px）

颜色：
1）关键字

red
blue

2）rgb(r，g，b)

r:red
g:green
b:blue
0-255

3）rgba(r,g,b,a)

a:apcaity:透明度
  0-1：
   0：完全透明
   1：完全不透明
   0.5：半透明

4）16进制颜色值
#16进制值

#fff：白色
#ccc：灰色

8.文本样式
color

c:/windows/fonts
c:/users/fonts
font-family:""
web-font:网络字体
  1>下载字体文件
  2>声明字体
  3>引用

字体图标

 1）ont-awesome
   1>下载框架压缩包
   2>在html中引入外部css文件
   3>在行内元素上，设置class=”fa fa-xxx“ 
 2）icon-font
   1>下载压缩包
   2>在html中引入外部css文件
   3>在行内元素上，设置class=”iconfont“