文章目录
CSS
选择器
基本选择器
标签选择器
顾名思义就是通过标签名来选择元素:
示例:
p {
color: red;
}
将所有的p标签设置字体颜色为红色。
不管标签藏的多深,都能选中
选中的是所有的,而不是某一个,所以说 “共性” 而不是 ”特性“
ID选择器
通过元素的ID值选择元素:
示例:
#i1 {
color: red;
}
将id值为i1
的元素字体颜色设置为红色。
- 同一个页面中id不能重复。
- 任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA
类选择器
-
所谓类 就是class . class与id非常相似 任何的标签都可以加类
但是类是可以重复 归类 -
同一个标签中可以携带多个类 用空格隔开
通过样式类选择元素:
示例:
.c1 {
color: red;
}
将所有样式类含.c1
的元素设置字体颜色为红色。
小结
1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式
2.每个类要尽可能的小,有公共的概念,能够让更多的标签使用
到底使用id还是用class?
答案:尽可能的用class。除非一些特殊情况可以用id
原因:id一般是用在js的。也就是说 js是通过id来获取到标签
通用选择器
不推荐使用,性能比较差
使用*
选择所有元素:
* {
color: black;
}
组合选择器
后代选择器
因为HTML元素可以嵌套,所以我们可以从某个元素的后代查找特定元素,并设置样式:
div p {
color: red;
}
从div的所有后代中找p标签,设置字体颜色为红色。
儿子选择器
div>p {
color: red;
}
从div的直接子元素中找到p标签,设置字体颜色为红色。
毗邻选择器
div+p {
color: red;
}
找到所有紧挨在div后面的第一个p标签,设置字体颜色为红色。
弟弟选择器
div~p {
color: red;
}
找到所有div标签后面同级的p标签,设置字体颜色为红色。
交集选择器
h3{
width:300px;
color: red;
}
.active{
font-size: 30px;
}
h3.active{
background-color: yellow;
}
并集选择器
/*并集选择器 (组合) 设置多个标签中的统一样式*/
a,h4{
color: #666;
font-size: 20px;
text-decoration: none;
}
属性选择器
除了HTML元素的id属性和class属性外,还可以根据HTML元素的特定属性选择元素。
根据属性查找
[title] {
color: red;
}
根据属性和值查找
找到所有title属性等于hello的元素:
[title="hello"] {
color: red;
}
找到所有title属性以hello开头的元素:
[title^="hello"] {
color: red;
}
找到所有title属性以hello结尾的元素:
[title$="hello"] {
color: red;
}
找到所有title属性中包含(字符串包含)hello的元素:
[title*="hello"] {
color: red;
}
找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:
[title~="hello"] {
color: red;
}
表单常用
input[type="text"] {
backgroundcolor: red;
}
伪类选择器
常用的几种伪类选择器。
没有访问的超链接a标签样式:
a:link {
color: blue;
}
访问过的超链接a标签样式:
a:visited {
color: gray;
}
鼠标悬浮在元素上应用样式:
a:hover {
background-color: #eee;
}
鼠标点击瞬间的样式:
a:active {
color: green;
}
input输入框获取焦点时样式:
input:focus {
outline: none;
background-color: #eee;
}
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
}
/*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(3){
font-size: 30px;
color: purple;
}
/*n表示选中所有 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
}
/*偶数*/
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size: 50px;
color: yellow;
}
/*隔几换色 隔行换色*/
div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
伪元素选择器
介绍常用的伪元素。
first-letter
用于为文本的首字母设置特殊样式。
例如:
p:first-letter {
font-size: 48px;
}
before
用于在元素的内容前面插入新内容。
例如:
p:before {
content: "*";
color: red;
}
在所有p标签的内容前面加上一个红色的*
。
after
用于在元素的内容后面插入新内容。
例如:
p:after {
content: "?";
color: red;
}
在所有p标签的内容后面加上一个蓝色的?
。
CSS的继承性和重叠性
继承性
继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承
有一些属性是可以继承下来 : color 、 font-、 text-、line-* 文本元素
像一些盒子元素,定位的元素(浮动,绝对定位,固定定位)不能继承
重叠性
层叠性: 权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了
权重: 谁的权重大,浏览器就会显示谁的属性
谁的权重大? 非常简单 数数
id的数量 class的数量 标签的数量
选择器的优先级
当权重不同时,数数
当权重一样的时候 是以后设置的属性为准。 前提权重一样 ,后来者居上
继承来的属性 权重为0
总结:
- 先看标签元素有没有被选中,如果选中了,就数数 (id,class,标签的数量) 谁的权重大 就显示谁的属性。权重一样大,后来者居上
- 如果没有被选中标签元素,权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:“就近原则” : 谁描述的近,就显示谁的属性
注意: !import方式来强制让样式生效,但是不推荐使用。因为大量使用
!import`的代码是无法维护的。
盒模型
盒模型的属性
**width:**指的是内容的宽度,而不是整个盒子真实的宽度
**height:**指的是内容的高度,而不是整个盒子真实的高度
padding: 就是内边距。 padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样
也就是说background-color这个属性将填充所有的border以内的区域,就是边框到内容之间的距离。padding有四个方向。所以说我们能分别描述4个方向的padding。
方法有两种:1.写小属性 2.写综合属性 用空格隔开
如果想保证盒子的真实宽度,加width应该减padding 减width 应该加padding
border: 边框的意思
边框有三个要素: 粗细 线性 颜色
如果颜色不写,默认是黑色的
如果 粗细不写 不显示。 只写线性样式,默认的有上下左右 3px的宽度 solid 默认的黑色
margin: 外边距 指的是距离
标准文档流的概念
宏观的讲,我们的web页面和ps等设计软件有本质的区别
web 网页的制作 是个“流” 从上而下 ,像 “织毛衣”
而设计软件 ,想往哪里画东西 就去哪里画
标准文档流的微观现象?
1.空白折叠现象
2.高矮不齐,底边对齐
3.自动换行,一行写不满,换行写
Display属性的运用
将块级元素转化成行内元素
box {
display:inline-block;
}
将行内元素转换成块级元素
span {
display:block;
}
隐藏当前的标签,不占位置
span {
display:none;
}
隐藏当前的标签,占位置
span {
visibility: hidden;
}