CSS基础

CSS基础

  • 样式表
    • 内联样式表
    • 内部样式表
    • 外部样式表
      • 链接(HTML)
      • 导入(CSS)
      • 两者区别
    • 优先级
    • 层叠、继承、冲突
  • 选择器
    • 标签选择器
    • 全局选择器
    • class 选择器
    • id 选择器
    • 群组选择器
    • 子父选择器
    • 后代选择器
    • 相邻兄弟选择器
    • 通用兄弟选择器
    • 伪类选择器
      • UI伪类选择器
      • 结构伪类选择器

样式表

内联样式表

指在开始标签内使用样式表

<p style="font-size:50px;">段落标签p>

内部样式表

指单在一个文件内需要使用样式的时候我们用内部样式表
需写在头部 head 中

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiMourentitle>
    <style>
    	p{
    		color: red;
    	}
    style>
head>

外部样式表

分为两种:

链接(HTML)

在 head 头部标签中使用

<link rel="stylesheet" href="./Test.css">

导入(CSS)

在 head 头部标签
中的 style 标签中使用

@import url('./class1.css');

两者区别

从属关系区别:
@import是CSS提供的语法规则,只有带入样式表的作用;
link是HTML提供的标签,不仅可以加载CSS文件,还可以定义RSSREL链接属性等;
加载顺序区别:
加载页面时,@import引入的样式表在页面加载完毕后被加载;
link 为同时加载;
兼容性区别:
是CSS2.1才有的语法,因此只可以在IE5+才能识别;
不存在兼容性问题;
不存在兼容性问题:
由于DOM是基于文档的,因此无法使用@import的方式插入样式;
link可以通过JS操作DOM,插入link标签来改变样式;
权重区别:
@import: 小;
link: 大;

优先级

采用就近原则,行内样式 > 内部样式 > 外部样式

层叠、继承、冲突

层叠:
同一个元素,使用多个样式表修饰,所有的样式进行叠加称为叠加;
继承:
在子父关系中,文本样式可以被继承,布局样式不可以被继承(块及元素继承父的宽,行级不可以);
冲突:
多个样式进行修饰同一个标签的时候,采用就近原则使用样式表;

选择器

标签选择器

直接在 head 头部标签中的 style 标签中使用需要调整样式的标签名就可以

p{
	color:red;
}

全局选择器

	*{
            margin: 0;
            padding: 0;
            }

class 选择器

在开始标签中设置个 class 值

<li class="one">第二段文字li>

在 head 头部中使用 .class值

.one{
        background-color: red;
    }
    

id 选择器

在开始标签定义 id值

<li class="one" id="a1">第一段文字li>

在头部标签里使用

#a1{
	color:red;
}

群组选择器

在头部将需要调整样式的标签使用逗号隔开

ul,ol{
      color: red;
}

子父选择器

代表ul标签内的li标签调整样式

ul>li{
      color: blue;
}

后代选择器

将ul标签的后代ol使用空格隔开,将改变ol的样式

ul ol{
            color: blueviolet;
}

相邻兄弟选择器

将和ul标签下面相邻的ol标签改变样式

ul+ol{
            font-size: 60px;
        }

通用兄弟选择器

将和ul处于同一级的p标签调整样式

ul~p{
            font-size: 50px;
        }

伪类选择器

UI伪类选择器

		/* 链接默认状态 */
        a:link{
            color: antiquewhite;
        }
        /* 链接点击后状态 */
        a:visited{
            color: aquamarine;
        }
        /* 鼠标浮上链接状态 */
        a:hover{
            color: red;
        }
        /* 鼠标点击时状态 */
        a:active{
            color: yellow;
        }

结构伪类选择器

		/* ul中第三个标签是li改变样式 */
        ul li:nth-child(3){
            color: red;
        }
        /* body中第四个标签是b改变样式*/
        b:nth-child(4){
            background-color: blue;
        }

你可能感兴趣的:(css,前端)