腾讯前端十天小白训练营<DAY 3>---css引入方式、选择器&权重

来源：互联网发布：华农c语言实验答案编辑：程序博客网时间：2024/06/06 20:11

CSS的引入方式

<html><head><title>css的引入</title><!--外链式/链接式 : 新建css文件，引用时注意相对路径和绝对路径的区别--><link href="demo.css" type="text/css" rel="stylesheet"/><!--内嵌式--><style type="text/css">p{    color:green;}</style></head><body><!--行内样式--><p style="color:red;">hello</p><p>样式的显示：就近原则</p></body></html>

导入式(一般不用）：

<style>@import(url(demo.css))</style>

这里写图片描述

w3school_____如何创建css

css选择器

1) 标签选择器：是什么标签就写什么标签；

p{    color:red;}

2) class选择器：可以重复，可以共用;
一个标签可以有多个class;

.c1{    color:blue;}.c2{    font-size:36px;/*设置字体大小*/    /*添加和取消粗体使用font-weight属性bold,normal;    添加或取消斜体可以使用font-style属性：italic(斜体）,normal,  oblique(倾斜的字体);    控制大小写:text-transform:    uppercase,capitalize,lowercase    */}

3) id选择器：优先级最高；
不能共用，在同一个html文档中同一个ID只能用一次
https://www.zhihu.com/question/19899340；（具体的还是遇到了再查吧，现在查了也看不懂@-@）

#d1{    color:green;}

下面是源代码：

<html ><head><link href="Untitled-2.css" type="text/css" rel="stylesheet"/></head><body><p class="c1" id="d1"> hello </p><p class="c1 c2" id="d2"> hello </p></body></html>

下面是css部分

p{    color:red;}.c1{    color:blue;}#d1{    color:green;}.c2{    color:yellow;    font-size:36px}/* CSS Document */

这里写图片描述

空格：

body .c1{}

表示 body 下面的 c1

c1后面再加空格就表示 body下面的c1下面的xxx

逗号:

.c1,.c2

表示class=c1和class=c2的标签

下面是源代码：

<html><head><link href="Untitled-5.css" type="text/css" rel="stylesheet" /></head><body><div> <p class="c1">cccccccccc</p> <p>dddddddddc</p>   <p>ceeeeeeec</p>     <p>ccffffff</p></div></body></html>

*号：
表示页面中的所有标签

*{    color:blue;}

这里写图片描述

+号
表示紧随前面标签的同级元素

*{    color:blue;}.c1+p{    color:red;}

这里写图片描述

~
以下css代码表示class=c1后面所有同级的元素

.c1~p{    color:red;}

这里写图片描述

> 表示子元素的

以下是源代码

<html><head><link href="Untitled-5.css" type="text/css" rel="stylesheet" /></head><body><div> <p class="c1">cccccccccc</p> <p>dddddddddc</p>   <p>ceeeeeeec</p>     <p>ccffffff</p>        <div><p>wwwww</p></div></div><p>cddddddddd</p></body></html>

以下css代码表示div下的子元素中的P标签

div>p{    color:red;}

这里写图片描述

以下表示.c1下的子元素的p标签

.c1>p{    color:red;}

这里写图片描述

以下表示class=c1下的所有p标签

.c1 p{    color:red;}

这里写图片描述

[ ]表示设置了某属性的某标签

以下是源代码：

<html><head><link href="Untitled-5.css" type="text/css" rel="stylesheet" /></head><body><a href="http://www.w3school.com.cn" title="aaa">w3school.cn</a><a href="http://www.w3school.com" >w3school</a></body></html>

如下表示设置了title属性的a标签

a[title] {     color:red; }

如下为为包含指定值的 title 属性的所有元素设置样式
[title~=hello] { color:red; }

如下表示属性值为一个链接的a标签

a[href='http://www.w3school.com.cn'] {     color:red; }

这里写图片描述

如下，
^ 表示以xx开头的
$表示以XX结尾
*表示里面包含指定值（如 a[href*=’www’] ）
~表示包含指定值（词汇）的 title 属性的所有元素设置样式。适用于由空格分隔的属性值

a[href^='http://www.w3school.com.cn'] {     color:red;}a[href$='.com'] {     color:green; }

这里写图片描述

详细内容参考w3school-css属性选择器详解

css选择器权重

这里写图片描述

<html><head><link href="Untitled-5.css" type="text/css" rel="stylesheet" /></head><body><div class="c1">     <h3 class="c2" id="d2" >hello</h3></div> </body></html>

如下，权重依次增加,最终hello显示为red

.c1 h3{    color:blue;/*cd*/}.c1 .c2{    color:yellow;/*cc*/}#d2{    color:black;/*b*/}.c1 #d2{    color:red;/*bc*/}

css具有继承性，当设置:

.c1 {    color:red;  }

显示hello为red

阅读全文

0 0