css2三大样式表

css

• 层叠样式表
• 可以渲染html到网页，为html标签写表现形式
• 多个样式可以层叠为一个

html标签可以分为几种类型：
①按照是否换行来分：
行级元素（行内元素，不会独占一行）；块级元素（块元素，独占一行）
②根据是否闭合来分： 完全闭合；自闭和（单闭合）

css样式的写法规则：

属性：值；

颜色值（取值类型）： 1.单词值，red。2.十六进制颜色值，#000000 3.rgb，rgb(114,255,255) rgba(114,255,255,0.5)

网页里面的像素单位：

• px 代表固定像素值 ，相对屏幕的分辨率的单位值。
• % 百分比像素值。
• rem 相对单位，只相对于网页的html根元素的字体大小。
• em 相对单位，相对当前元素文本字体大小，没有设置字体时默认浏览器默认字体大小。

css里面设置宽高属性的前提： 当前元素必须是块级元素。如果要给行级元素设置宽和高，必须转化为块级元素

css在网页中的三种类型

行内样式

基本样式：

1. color:red;（color属性控制字体颜色）
2. font-size: 20px;(控制字体大小） 默认的属性值 larger x-larger small x-small 通常用px
3. font-family: serif; （设置字体系列）
4. width:200px;(设置块级元素宽）
5. height:200px;(设置块级元素高）
6. border：1px solid #000;(设置边框的宽度，样式，颜色。三个属性值在表述的时候中间用空格隔开)
   border-left:1px solid #000;
   border-left-color:#000;
   border-left-style:solid;
   border-left-width:1px;
   一个块级元素有四个边框，四个方向的框均可以用这种方式进行设置（left,top,right,bottom)
7. font:italic bold 30px self ;
   font-style:italic;（规定字体样式）normal默认值，italic斜体，oblique倾斜，inherit从父元素继承字体样式。
   font-weight:bold;（规定字体粗细）normal默认值，bold粗体，bolder更粗，lighter更细，数值，inherit
   font-size:30px;（规定字体的大小）
   font-family:self;（规定字体系列）
   关于字体的设置可以一次设置它的样式，也可以分别设置。

行内样式的书写位置：

<div style="color:red;">div内容块</div>

内嵌样式

css内嵌样式：

• 内嵌的位置，在head标签里面或者内嵌到body里面。
• 通过css选择器来匹配所有样式

css选择器：

* 代表所有元素选择器，匹配网页里面的所有元素。
element，代表元素选择器,匹配的是网页里面所有的同名元素。
class，代表类选择器。使用“.”来匹配。
id选择器,id设置成唯一值。使用“#”匹配。
子父选择器。
	子父元素之间是空格，表示匹配当前元素的所有后代元素。
	子父元素之间是“>”，表示匹配当前元素的直接子元素。
复合选择器。复合元素之间使用“，”分割。

注意：class，id命名的时候不要使用纯数字，数字不要开头，命名规则可以驼峰命名BlockSmall或者帕斯卡命名blockSmall

内嵌样式的书写形式：

<style>
/* *号选择器*/
*{
	border:1px solid blue;
}
/* 元素选择器*/
div{
         color:deepskyblue;
   }
/* id选择器*/
#answer1{
         color: mediumvioletred;
         font-size:20px;
     }
/* class选择器*/
 .answer2{
         color: orangered;
         font-size:50px ;
     }
/* 子父元素选择器*/
 ul li{
          color: blueviolet;
          border-bottom: 2px solid #000;
      }
/* 复合元素选择器*/
span.answer2,#answer1{
        color: yellow;
        font-size: 40px;
    }
</style>

内嵌样式选择器的优先级为：

• id选择器>class类选择器>元素选择器>*选择器
• 子父选择器的父选择器为id选择器>id选择器>class类选择器>元素选择器>*选择器
• 子父选择器中的父选择器和某一选择器同级时，子父选择器的优先级更高。子父选择器的选择器的优先级取决于父选择器

外部样式

外部样式，通过在外部写样式表，然后引入网页内部

外部样式的引入，
①可以使用link标签,可以在head或者body中写引入语句,还可以在内嵌样式里面引入
②使用@import+外部样式路径,可以写在内嵌样式处。

外部样式的书写形式：

/*href属性中是外部样式表的路径，可以是相对路径，也可以是绝对路径*/
/*不过不建议使用绝对路径（带盘符），当设计的网页换设备打开时，可能会找不到外部样式表*/
<link rel="stylesheet" href="./css/index.css"/>

<style>@import "css/index.css";</style>

外部样式表的写法和内嵌样式相同，选择器之间的优先级也相同，只不过是把内嵌样式的所有内容提取出来单独放在了外部样式表中而已。

三种样式的有限级比较

①如果样式之间没有冲突：则样式的优先级是，样式进行叠加：
行内 > 内嵌 >外部（内嵌样式在外部样式加载之后）
行内> 外部 >内嵌（内嵌样式在外部样式之前加载）
②如果样式之间存在冲突，样式优先级是 样式就近原则选取
行内> 内嵌 > 外部 （内嵌样式在 外部样式加载之后）
行内> 外部 >内嵌 （内嵌样式在外部样式之前加载）