011.属性选择器022.子元素选择器023.兄弟元素选择器024.否定伪类025.样式的继承026.选择器的优先级027.a的伪类028.文本标签029.列表030.单位031.颜色

011.属性选择器:

title:鼠标移动上去有提示

p【title】{}:表示所有p元素带有title可以变化

p[title="..."]{}:可以调节。。。来变化

p[title^($)(*)="..."]{

                       background-color:颜色

                        }

^:开头

$:结尾

*:包含


022.子元素选择器:

p:first-child{

                     background-color:yellow;

                     }

p标签的背景变成黄色/////////!!!必须为p标签然后还是第一个子元素,只要是第一个,不管在哪里都会变黄色(在bidy里)

(first:第一个)(last:最后一个)

first-child:

选择第一个子标签

last-child:

选择最后一个子标签

nth-child:

选择指定位置的子元素

first-of-type:

last-of-type:

nth-of-type:

选择指定类型的子元素


023.兄弟元素选择器

span + p{

    background-color: yellow;

}

span后一个<p>变颜色。

span ~ p{

background-color: yellow;

}

span后面<p>都变颜色


024.否定伪类

p:not(.hello){

background-color: yellow;

除了class=“hello”不变其他都变

p:not(#p1){

background-color: yellow;

除了 id为p1的不变别的都变


025.样式的继承

<p style="font-size: 30px;">

我是p标签的文字

<span>我是span中的文字</span>

</p>

<span>我是p元素外的span</span>

<p>和里面的<span>变大,外面,<span>不变

<div style="font-size: 30px;">

            <p style="font-size: 30px;">

            我是p标签的文字

            <span>我是span中的文字</span>

            </p>

</div>

<p>为儿子继承了<div>的大小。(在<div>里的元素都会继承)

body{

font-size: 30px;

}

<body>里都会继承

<div style="background-color: yellow;">

<p>

我是p标签的文字

<span>我是span中的文字</span>

</p>

</div>


026.选择器的优先级

内联样式1000

id选择器 100

类和伪类选择器10

元素选择器 1

通配* 0

继承的样式没有优先级

并集选择器的优先级是单独计算的

div,p,#p1,.hello{}

!不推荐写内联样式

(!)!important最高

同等级后面会覆盖前面的

027.a的伪类 

:link

:visited

:hover

:active

而这四个选择器的优先级是一样的

028.文本标签

em标签用于表示一段内容中的着重点。

strong标签用于表示一个内容的重要性。

通常em显示为斜体,strong显示为粗体。

<i>:斜体 可以放icon小图标                     <b>粗体   :纯表现标签

small:小字       big:大字                 <q>css引号         <cite>斜体

<blockquote>块元素可以用来引用        <sup>变成右上角的小字        <sub>变小向下靠

<ins>表示插入的内容,显示时通常会加上下划线

<del>表示删除的内容,显示时通常会加上删除线

shift+tab:减少缩进

029.列表

在网页中一共有三种列表:

1.无序列表:ul li

2.有序列表:ol li

3.定义列表: dl dt dd

030.单位

分辨率的长乘宽就是像素

手机的像素是电脑的4/1px

%会根据它的父元素的尺寸来计算他的尺寸

em 1em = 1font-size       1em=20

字体字号相关的样式用em

031.颜色

mk:@MSITStore:C:\Users\�屡����\Documents\WeChat%20Files\kangxintaiw\FileStorage\File\2019-10\W3School�����ֲ�(2015.07.17)(1).chm::/www.w3school.com.cn/cssref/css_colornames.asp

截图上面有颜色的代码!

可以用百分号,16进制


background-color: blue;

background-color: rgb(0,0,255);

background-color: rgb(100%,100%,100%);(白)

background-color: #00ff00;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容