CSS 导入-选择器-权重

CSS 导入-选择器

Cascading Style Sheets

层叠样式表

它用来控制网页样式，并允许将样式代码与网页内容分离的一种标记性语言

CSS语法结构

选择器 声明{} 属性名：属性值

css三种引入方式

内嵌式

<p style='color:red;'>文字颜色为红色</p>

嵌入式

<style type='text/css'>
    p{
        color:red;
    }
</style>

外部式

<link rel="stylesheet" href="index.css" type="text/css">

优先级

内嵌式>嵌入式>外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

CSS选择器

基础选择器

标签选择器

p{
	color:red;
}

类选择器

.class{
	color:red;
}

id选择器

#id{
	color:red;
}

高级选择器

后代选择器

div里面的所有p,不止是第一代，是所有子类

div p{
    css代码样式;
}
div .a{
    css代码样式;
}
#b .a{
    css代码样式;
}

子代选择器

只对子代有效

div>p{
    css代码样式;
}

毗邻选择器

div和p互为邻居

div+p{
	css代码样式;
}
对p有效

兄弟选择器

同一层级的兄弟标签

span~.a{
	css代码样式;
}

组合选择器

h1,span,p{
    color:red;
    font-size:14px;
}

属性选择器

div标签有name属性的

div[name]{
	css代码样式;
}

属性值为123的
div[name="123"]{
	css代码样式;
}

伪类选择器

它遵循”爱恨准则“，所谓爱恨就是”LoVe HAte“

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

伪元素选择器

常用的给首字母设置特殊的样式：

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用于清除浮动。

CSS的继承性

网站应用：比如我们在去设计网站的时候，网站统一的字体颜色为gray,字体大小为14px。那么我们可以很好的利用css的继承性来实现此效果。但是不是所有属性都能继承的

代码如下：

body{
    color:gray;
    font-size:14px;
}

CSS的权重

继承权重几乎为 0

元素选择器 1

类选择器 10

ID选择器 100

内联样式 1000

权重计算永不进位！

!important权值最大

p{color:gray;}/*权值为1*/
div div p{color:yellow;}/*权值为1+1+1=3*/
.active{color:red;}/*权值10*/
div .active{color:black;}/*权值为11*/
div div .active{color:blue;}/*权值为12*/
.wrap #box2 .active{color:purple;}/*权值为120*/
#box1 #box2 .active{color:green;}/*权值为210*/