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;