前端--css基础02(css特性.行块级特点.属性[背景.颜色,文字及其文字阴影])

css 基础属性

1. 网页中的显示方式

1. 块级元素：

   div, p, ul，ol, dl，li,dt,dd,h1…

   特点：
   ✔ 所有的块级元素独占一行显示(与宽度无关)
   ✔ 如果一个块级元素没有设置宽度，那么其默认宽度是等于其父元素的宽度。
   ✔ 块级元素可以设置宽度或高度改变其大小。
   ✔ 块级元素元素的高度默认是被其内容撑开

2. 行内元素

   span,a,strong,em,font…

   特点：
   ✔ 所有的行内元素都在一行显示
   ✔ 所有的行内元素默认的宽度和高度都是其内容撑开的大小
   ✔ 行内元素默认不能设置宽度和高度

3. 行内块元素

   input, img…

   特点：
   ✔ 所有的行内块元素都在一行显示

   ✔ 所有的行内块元素都可以设置宽度和高度。

2. 网页中元素的模式转化

display: block; ----> 转化为块级元素

display: inline-block; —> 转化为行内块元素

display: inline; —> 转化为行内元素

3. CSS特性：

1. 层叠性：

   条件：
   ✔ 必须是相同的选择器(选择器的权重相同情况下)
   ✔ 选择器必须选中同一个标签
   ✔ 属性冲突的时候，最后定义的样式会将前面定义的样式覆盖掉

2. 继承性：

   条件：
   ✔ 必须在嵌套结构中
   ✔ 子元素没有默认样式的时候其样式会受父元素样式的影响

   可以被继承的属性：

   color: 可以被继承
   font-size: 可以被继承
   font属性中的所有属性都可以被继承。

   不可以被继承的属性：

   width 和 height

3. 优先级：

   特点：
   ✔ 选择器不一样

   ✔ 选中同一个标签
   优先级排序：

   标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important
   10 100 1000 10000 10000+
   ✔ 优先级中的第一个特点：

   继承的权重为0;
   

   ✔ 优先级的第二个特点：
   如果使用不同的选择器，选中同一个标签（优先考虑叠加运算，然后考虑是否有层叠）

   权重可以叠加
   

4.伪类选择器: 用来选中页面中标签的。【需要用户的动作】

☞ :link {属性: 值;} ----》 用来设置链接的样式的。

注意：
    1.不推荐使用:link设置a标签的样式
    2.存在兼容性问题

☞ :visited {属性：值;} ----> 用来设置标签被访问过后的样式

注意：
    1.visited通过获取浏览器中的缓存地址实现的效果
    2.只能设置与颜色相关的属性

☞ :hover {属性: 值;} —> 用来设置鼠标悬停时候标签的样式[掌握]

注意：
    1. 在该选择器中可以设置任何的属性。

☞ :active {属性：值;} —>设置标签被激活后的样式

☞ :focus {属性：值；} —> 设置当前标签获取到鼠标焦点时候的样式【掌握】

3. 重要的属性简介

1. 背景复合属性：
   ☞ 背景色： background-color: transparent(默认颜色透明设置)

   ☞ 背景图片： background-image: url(路径)

   注意： 1. 背景图片默认是平铺

   ☞ 设置背景图片的平铺方式：

   background-repeat: repeat(默认值) | no-repeat | repeat-x(水平平铺) | repeat-y(垂直平铺)

   ☞ 设置背景图片位置: background-positio
   ☞ 背景属性合写：
   background:background-color background-image background-repeat background-position;
   ✔ 第一种设置方式可以直接设置方位名称：

   left | top | right | bottom | center
   

   ✔ 背景设置位置第二种方式：

   直接设置具体数字
   
   注意：
       1. 设置具体数字的时候，第一个值代表水平方向，第二值代表垂直方向
   
       2. 如果只设置一个值，那么第二个值默认代表垂直居中
   

   注意： 在网页中所有的元素默认都是在父元素的左上角显示

2. 文字阴影：
   text-shadow: 0px 0px 10px red;

   第一个值代表： 阴影在水平方向的偏移（整数向右移动，负数向左移动）

   第二个值代表： 阴影在垂直方向的偏移（正数向下移动，负数向上移动）

   第三个值代表： 阴影的清晰度（模糊度）

   第四个值代表： 阴影的颜色
   注意： 如果要设置多个阴影，那么使用逗号隔开即可。

3. 文本（文字）属性合写：
   ☞ 文字大小 ： font-size

   ☞ 文字斜体 ： font-style: normal(正常) | italic(斜体)

   ☞ 文字加粗显示： font-weight: 400 = normal(正常) | 700=bold(加粗)

   ☞ 文字字体： font-family: ‘宋体,黑体,微软雅黑…’

   通过编码表示一个字体：5b8b\4f53 --> 宋体

   ☞ 文字行高：line-height: 用来设置文字与文字上下之间的距离

   font: font-style font-weight font-size/line-height font-family;

例如： font: italic 700 100px/150px '宋体';

*注意事项：

    1. font属性合写中必须设置font-size 和 font-family;

    2. font-size 必须 在 font-family 之前设置

    3. 如果要设置行高，那么必须在文字大小后面设置行高

    4.如果属性都要设置那么按照 font: font-style font-weight  font-size/line-height font-family;顺序设置即可

5. CSS中颜色的表示方式：
   ☞ 预定义表示法： red ,pink…

   ☞ 十六进制表示法：#a-f(0-9) [一共是6位]

    #ffffff   #fff000
   

   ☞ rgb表示颜色(三原色)

    r  ---> red  （0,255）
   
    g  ---> green (0,255)
   
    b  ---> blue (0,255)
   

   ☞ rgba实现半透明颜色效果

    a  ----> alpha(透明度)  [0,1]
   
   例如:background-color: rgba(0,0,0,0.6);