前端CSS css引入方式 css选择器 css选择器优先级

  

一.       CSS介绍

  CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观。

  当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

二.  CSS语法

  CSS实例

    每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

      前端CSS  css引入方式   css选择器 css选择器优先级

 CSS注释

/*这是注释*/

    

三.  CSS的几种引入方式

  行内样式

    行内样式是在标记的style属性中设定CSS样式。不推荐大规模使用,说白了就是直接在标签里面注明css样式

style<p style="color:red;background: aquamarine">天冷了</p>

  内部样式

    嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
*{background: darkgoldenrod;
color: black;
font-size: x-large;
}
#tian{
color: magenta;
}
.xue{
color: aliceblue;
}
</style> </head>

  外部样式

    外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式。

<link href="beautistyle.css" rel="stylesheet" type="text/css"/>  #现在写的这个.css文件是和你的html是一个目录下,如果不是一个目录,href里面记得写上这个.css文件的路径
这部分是写在整个网页的head里面

    beautistyle.css文件的样式

p{color:black}  /*设置字体颜色为黑色*/       #p是要对其进行设置的标签(选择器),里面是要设置的样式,/**/是注释,标明这个css是什么样式的.

四.  CSS选择器(如何找到对应的标签)

  1. 基本选择器

    元素选择器(标签名)

    

p{color: chartreuse}

前端CSS  css引入方式   css选择器 css选择器优先级

  那如果只是想把其中的一个坡标签进行修改呢?用其他选择器

  id选择器

#tian{background: black}  /*对id为tian的选择器设置背景色为black*/

前端CSS  css引入方式   css选择器 css选择器优先级

id不能重复,如果想给多个p标签同时添加一个css样式怎么办?挨个添加id属性吗?

并且,如果是不同的标签,但是他们的css样式要一样,怎么办?看下面

  类选择器

.c1 {  .表示class属性,c1表示class的值
  font-size: x-large
 } 
p.c1{font-size: x-large}
p.c1 { 找到所有p标签里面含有class属性的值为c1的p标签,注意他俩之间没有空格昂  }

前端CSS  css引入方式   css选择器 css选择器优先级

  效果:

前端CSS  css引入方式   css选择器 css选择器优先级

注意:

   样式类名不要用数字开头(有的浏览器不认)。

   标签中的class属性如果有多个,要用空格分隔

前端CSS  css引入方式   css选择器 css选择器优先级

  通用选择器

*{}   /*这个*是匹配所有的标签的意思*/
*{background: pink}

前端CSS  css引入方式   css选择器 css选择器优先级

  效果:

前端CSS  css引入方式   css选择器 css选择器优先级

  2.组合选择器

    后代选择器

#d  div{color: chartreuse}
用#筛选中id为d的标签,把他的子子孙讯都设置肢体颜色chartreuse

前端CSS  css引入方式   css选择器 css选择器优先级

  

  儿子选择器

 #d>p{color: red}  选中id为d的标签,并指向名字为p的儿子,用>指向其儿子

前端CSS  css引入方式   css选择器 css选择器优先级

  下邻居选择器

 div+p{color:red}  找到div的标签,并且把div标签下面相邻的p标签设置字体颜色 用+表示相邻

前端CSS  css引入方式   css选择器 css选择器优先级

  弟弟选择器

 #d~p{color: magenta}  找到id为d的标签,并把其下面的兄弟标签设置字体颜色 用~指向

前端CSS  css引入方式   css选择器 css选择器优先级

  属性选择器

    div[title="div"]{color:pink;}   选中所有具有title属性,并且属性值为div的标签
div[title]{color: blue}      只要title属性就可以
div[ddd]{color: darkgoldenrod} 这个想说明,属性是可以自己设置的

前端CSS  css引入方式   css选择器 css选择器优先级

前端CSS  css引入方式   css选择器 css选择器优先级

前端CSS  css引入方式   css选择器 css选择器优先级

  每个标签里面都可以可一个title属性,这个属性就是鼠标移动到这个标签上,就显示出一个title属性的值

  还有一些不常用的属性,正则的写法,看一下就好(了解,不死磕)

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
} /*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
} /*找到所有title属性中包含(字符串包含)hello的元素*/
[title*="hello"] {
color: red;
} /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/
[title~="hello"] {
color: green;

前端CSS  css引入方式   css选择器 css选择器优先级

  分组和嵌套

      分组(多个选择器逗号分隔)

  当多个选择器的样式设置是一样的,我们就用逗号分隔开就好,不要每一个选择器都去设置,那样很累,而且整体的可读性极差

div span,p{color: magenta;}  把div 的后代中的所有span标签,p标签进行选择

  前端CSS  css引入方式   css选择器 css选择器优先级

div span,
p{color: magenta;} 这样分两行写更加清晰

  

  

  嵌套

  多种选择器是可以混起来使用的

.p a{color:brown}   选择class值为p,内部的a标签全部全部设置成brown

前端CSS  css引入方式   css选择器 css选择器优先级

  

  伪类选择器(比较特殊,CSS3版本新加的特性)

    根据标签的状态进行改变,比如a颜色标签可以根据点击的状态进行改变

前端CSS  css引入方式   css选择器 css选择器优先级

a:link{color: magenta}      /* 未访问的链接设置成粉色 */

前端CSS  css引入方式   css选择器 css选择器优先级

a:visited{color: darkorange}     /* 已访问的链接设置成橘色 */

前端CSS  css引入方式   css选择器 css选择器优先级

a:hover{color: lime}
/* 鼠标悬浮的效果 */

前端CSS  css引入方式   css选择器 css选择器优先级

a:active{color: seashell}
/* 鼠标点击,未松开的效果 */

前端CSS  css引入方式   css选择器 css选择器优先级

/*input输入框获取焦点时样式*/
  #input默认的有个样式,鼠标点进去的时候,input框会变浅蓝色的那么个感觉

前端CSS  css引入方式   css选择器 css选择器优先级

前端CSS  css引入方式   css选择器 css选择器优先级

input:focus{outline: lime;
background: magenta} 输入框获得光标的框颜色,以及框的背景色

前端CSS  css引入方式   css选择器 css选择器优先级

注意:伪类选择器用的都是:,注意看清符号

  伪元素选择器(通过css造标签,不推荐使用)

    first-letter

div:first-letter{font-size: x-large;
color: lime;} 给所有的div标签文本的第一个字设置字体颜色,大小

前端CSS  css引入方式   css选择器 css选择器优先级

  

    before

/*在每个<p>元素之前插入内容*/  并不在p标签里面,要注意
p:before{
content: 'lalala';
color: red;}

前端CSS  css引入方式   css选择器 css选择器优先级

    later

/*在每个<p>元素之后插入内容*/
p:after{
content: 'ooooo';
color: yellow;}

前端CSS  css引入方式   css选择器 css选择器优先级

上面的这些前后添加的文本内容在页面上是无法选中的,正常的标签或者文字是可以选中的。

      before和after多用于清除浮动。

  前端CSS  css引入方式   css选择器 css选择器优先级

   选择器优先级(重点难点)

    css继承

对与许选择器选择了相同的标签,并赋予了不用样式,最终会怎么表现,或者说按照哪一个选择器的样式表现呢?

前端CSS  css引入方式   css选择器 css选择器优先级

  从图中可以看出,相同的选择器,按照加载顺序来,前面的都会被后面的覆盖掉,

所以按照最后一个来表现.那不同选择器之间的优先级有时候什么样子的呢?

继承是css一个重要的特征,是一种机制,她允许后代继承祖先的css样式:

例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
color: red;
}

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的,他的权重是0。

      我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {
color: green;
}

      此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。

  选择器的优先级

  在不同选择器选了相同标签的时候,浏览器的渲染顺序其实是根据优先级来渲染的,具体优先级入下图: 前端CSS  css引入方式   css选择器 css选择器优先级

注:内联就是把样式直接写在标签里面

前端CSS  css引入方式   css选择器 css选择器优先级

其他的权重:但是有一点说一下,就是上面那个权重计算永不进位的意思是:

我们看上面知道class的权重是10,但是即便是11个class相加起来大于id的

100权重,也还是id生效,也就是说,不会进位,class组合起来也无法超过id的权重

前端CSS  css引入方式   css选择器 css选择器优先级

  除此之外还可以通过添加 !important方式来强制让样式生效,不讲道理的操作,但并不推荐使用。

  因为如果过多的使用!important会使样式文件混乱不易维护,使用方法:

    前端CSS  css引入方式   css选择器 css选择器优先级

    万不得已可以使用!important

上一篇:287. Find the Duplicate Number (快慢指针)


下一篇:Duplicate File Finder Remover for Mac(重复文件查找软件) v1.2.5569中文