CSS入门(二)

zoukankan html css js c++ java

CSS入门(二)
一、组合选择器

每个选择器位可以是任意基础选择器或选择器组合

1.群组选择器
- 可以一次性控制多个选择器
- 选择器之间用逗号(,)隔开
```
div,.d1,#div{
    color:red;
}
```
2.子代(后代)选择器
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器是修饰性选择器
- 子代选择器必须为一级父子关系，后代选择器可以为一级，也可以多级父子嵌套关系
```
子代选择器用>连接
body>div{
    color:red;
}
注：控制body下的div选择器
后代选择器用空格连接
div .d2{
    color:red;
}
注：控制div下只要有d2的选择器
```
3.相邻(兄弟)选择器
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器是修饰性选择器
- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
```
相邻选择器用+连接
.d11+.d22{
    color:red;
}
注：控制的是d22选择器
兄弟选择器用~连接
.d11~.d33{
    color:yellow;
}
注：控制的是d33选择器
```
4.交集选择器
- 选择器之间没有任何的连接符
- 了解即可
```
div.s{
    color: yellow;
}
注：既是div选择器又是s选择器
html：
<div class="s">这是交集选择器</div>
```
5.多类名选择器
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器是修饰性选择器
- 只是为了更精确
```
.d1.d2{
    color: tan;
}
.d1.d2.d3{
    color: #123
}
```
二、组合选择器的优先级

1.同目录结构下
1. 子代与后代优先级相同
  
  例子：body>div == body div
2. 相邻与兄弟优先级相同
  
  例子：div+span == div~span
2.不同目录下

根据选择器的权值进行比较，权值为标签权重之和

选择器权重

通配(*) 1

标签(div) 10

类、属性(class) 100

id 1000

!import 10000

注：只有控制的是同一目标才具有可比性
- 权值比较时，关心的是值的大小，不关心位置与具体选择器名
- id永远比class大，class永远比标签大。
```
		/*10*/
		div{
			color: red;
		}
		/*20*/
		div div{
			color: yellow;
		}
		.d2{
			color: blue;
		}
		/*.d2抵消，剩10*/
		div .d2{
			color: orange;
		}
		/*等价与div .d2,权值相同，位置决定*/
		.d1 div{
			color: pink;
		}
		/*又多10*/
		div .d1 div{
			color: tan;
		}
		/*不具有可比性*/
		div .d1 >div{
			color: green;
		}
		/*高于一切class及标签*/
		#dd1 div {
			color: #000;
		}
```
三、属性选择器

属性选择器的权值 == class选择器的权重
```
有属性class的所有标签
[class]{
    color: orange;
}
/*有属性class且值为d2的所有标签(值不影响权重)*/
[class="d2"]{
    color: pink;
}

/*是div且class="d2"，增加了权重*/
div[class="d2"]{
    color: blue;
}
```
子串匹配属性选择器

模糊搜索
```
[calss ^= 'he']{
    color: yellow;
}
[calss $= 'ld']{
    color: tan;
}
[class *= 'ow']{
    color: cyan;
}
```
- [attr]：匹配拥有attr属性的标签
- [attr=val]：匹配拥有attr属性，属性值为val的标签
- [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
- [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
- [attr*=val]：匹配拥有attr属性，属性值包含val的标签
四、盒模型
- 广义：文档中所有功能性及内容性标签，及文档中所有显示性标签
- 狭义：文档中以块级形式存在的标签
盒模型由四个成员组成：margin+border+padding+content
- 四个成员均有自身独立显示区域，相互之间不影响(视觉上感觉有影响)
- margin(外边距),padding(内边距)，他们两个负责控制布局
- border控制边框
- content控制内容
块级元素和内联元素

块级元素：
- 总是在新行上开始，占据一整行；
- 高度，行高以及外边距和内边距都可控制；
- 宽度缺省是它的容器的100%，除非设定一个宽度
- 它可以容纳内联元素和其他块元素。
内联元素：
- 和其他元素都在一行上；
- 高，行高及外边距和内边距部分可改变；
- 宽度只与内容有关；
- 行内元素只能容纳文本或者其他行内元素。
- 外边界只能对左右起作用，内边距都起作用
display:显示方式
- 块：block
- 内联：inline
- 内联块：inline-block
1.content
- 通过设置width与height来规定content
- 块级标签可以设置自身宽高，默认宽为父级宽、高为0，高度可以由内容决定
- 内联标签不可以设置自身宽高，默认均为0，宽高由内容决定(可以通过设置display:block改成块标签)
2.border
- border组成：border-width(宽度),border-color(颜色),border-style(风格)三部分组成。
- border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
- border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
- border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style
风格解释

solid 实线

dashed 虚线

dotted 点状线

double 双实线

groove 槽状线

ridge 脊线

inset 内嵌效果线

outset 外凸效果线

border整体设置：border:1px solid red;

设置border-color: transparent;会透出背景颜色

3.padding和margin
- padding和margin都具有的成员：X-left、X-right、X-top、X-bottom
- 整体设置
赋值个数方位

1 上下左右

2 上下 | 左右

3 上 | 左右 | 下

4 上 | 右 | 下 | 左

规律：从上开始，顺时针赋值，不足找对面

使用谷歌浏览器页面调试工具
```
.box{
     100px;
    height: 100px;
    padding: 10px;
    background: red;
}
html:
<div class="box"></div>
```
通过上图可以看出：

padding与content公有背景颜色，红色区域为102*120

content区域为100*100

五、边界圆角

border-radius(含义是“边框半径”)

1.整体设置

border-radius可以同时设置一个到四个值，如果设置1个值，表示四个圆角都使用这个值，如果设置2个值，表示左上左上角和右下角使用第1个值，右上角和左下角使用第二个值。如果设置三个值，左上角第1个值，右上角，左下角第2个值，右下角第三个值。值设置的是圆角的水平半径和垂直半径，单位可以是任意css合法度量值。

赋值个数(值类型：长度 | 百分比) 解释

1 左上右上左下右下

2 左上右下 | 右上左下

3 左上 | 右上左下 | 右下

4 左上 | 右上 | 右下 | 左下

border-radius:30px;

总结：左上为第一个角，顺时针，不足找对角

使用斜杠(/)可以设置第二组值，第一组值表示水平半径，第二组值表示垂直半径，分别可以设置一到四个值。

border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;

2.单角设置

成员解释

border-top-left-radius 左上方位

border-top-right-radius 右上方位

border-bottom-left-radius 左下方位

border-bottom-right-radius 右下方位

六、a，img，list标签

1.超链接
```
<a href='要跳转的地址'>超链接文字</a>
```
1.1 a标签的属性
- href：代表链接一个url地址
```
url除了可以是网页外，还可以是其它的文件。还可以设置为网页中的某一个位置(锚点).
还可以是Email地址(mailto)，电话(tel)，短信(sms)
```
- title：鼠标悬浮的文本提示
- target：规定何处打开链接文档
```
target=_blank： 将链接内容在新的浏览窗口中打开。 
target=_self：  将链接的内容，显示在目前的窗口中。 
target=_parent：将链接的内容，当成文件的上一个画面。 
target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。
```
1.2 相对路径：
```
./或省略代表当前文件所在路径，可以访问与该文件同路径下的所有文件及文件夹
../代表上一级目录
```
1.3 a标签的reset操作
```
a {
    color: #333;
    text-decoration: none;
    outline: 0;
}
```
1.4 锚点
```
用<a name=“”>定义，例如：<a name=“here1”>第一部分</a>，
使用<a href=“#here1”>跳转到第一部分</a>超链接就可以定位到网页中的“第一部分”这个位置。
```
1.5 鼠标样式
```
{
    cursor: pointer;
}
常用：
text  文字选择器
crosshair   十字架
wait  等待
help  帮助
pointer 小手
```
2.图片
```
<img src="图片地址" title="" alt="">
```
2.1 常用属性
- alt -- 代表图像的替代文字(异常解释)
- src -- 代表一个图像源(就是图像的位置)
- title 提示信息
- border – 代表图片边框的宽度
- height -- 代表一个图像的高度
- width -- 代表一个图像的宽度
- usemap 将图像定义为客户器端图像映射。
3.列表

3.1 html列表标签
- <ul></ul> 代表HTML无序列表，里面每一列表项使用<li>标签定义
- <ol></ol> 代表HTML有序列表，里面每一列表项使用<li>标签定义
  
  属性 start 规定有序列表的起始值。 type 规定在列表中使用的标记类型。(1 a A i I) reversed H5新添加降序
- <li></li> 代表HTML列表项目，每个列表项使用一对<li></li>标记
- <dl></dl> 定义了定义列表（definition list）
- <dt></dt> 标签定义了定义列表中的项目（即术语部分）
- <dd></dd> 在定义列表中定义条目的定义部分。
3.2 css列表属性
- list-style-type
```
disc        实心点
circle      圆圈
square		小方框
decimal		数字
lower-roman	小写罗马字
upper-roman	大写罗马字
lower-alpha	小写字母
upper0alpha	大写字母
```
- list-style-position 位置
```
inside   标示在li里面
outside  标示在li外面
```
- list-style-image 使用图片 url(./123.gif)
- list-style 复合属性
```
list-style: type position image
list-style: none
```
七、伪类选择器

伪类以冒号(:)开头

1.a标签的四大伪类
- :link：未访问状态
- :hover：悬浮状态
- :active：活跃状态(鼠标按下不动的状态)
- :visited：已访问状态(浏览器缓存)
普通标签也可以运用 :hover :active
```
.box{
			 200px;
			height: 200px;
			background-color: red;
		}
		.box:hover{
			background-color: orange;
			cursor: pointer;
		}
		.box:active{
			 400px;
			border-radius: 50%;
		}
```
2.内容伪类

结合content使用，可以单独出现
- :before：内容之前
- :after：内容之后
```
.txt:before{
    content: "我真帅~~~"
}
.txt:after{
    content: "~~~我是真的帅"
}
*:after{
    content:"hehe"
}
```
3.位置(索引)伪类

位置从1开始
- :nth-child(n)：位置优先，再匹配类型
- :nth-of-type(n)：类型优先，再匹配位置
```
注：找到所有结构下的第2个标签，如果刚好是div那么匹配成功
div:nth-child(2){
    color: green;
}
注:先将页面中所有div找出，在匹配哪些在自己结构层次下的第二个div
div:nth-of-type(2){
    color: cyan;
}
```
应用场景：

在同一目录下都是同一类型，用 :nth-child(n)

在同一目录下有多种类型的标签，用 :nth-of-type(n)

4.取反伪类
- :not(a)：对a进行取反
```
[d]{
    color:red;
} d标签控制的是红色
:not([d]){
    color:red;
} 除了d标签控制的其它都是红色
span:not([d]){
    color:red;
} 是sapn标签并且没有d的，都是红色
```
八、盒模型布局
- 布局方位：margin-left、margin-right、margin-top、margin-bottom
- 影响自身布局：margin-left、margin-top(自身位置改变)
- 影响兄弟布局：margin-right、margin-bottom(自身位置不变)
margin-bottom影响上下兄弟，尽量别对margin-right进行设置

margin-right影响左右兄弟，尽量别对margin-bottom进行设置

布局坑

盒模型布局坑只出现在margin-top相关的地方

1.兄弟坑
```
上下两个模型重叠时取最大值(这里取30px)
.s1{
    margin-bottom: 20px;
}
.s2{
    margin-top: 30px;
}
```
2.父子坑

将子模型移动到中间
```
html:
<div class="sup">
    <div class="sub"></div>
</div>
```
```
.sup{
     200px;
    height: 200px;
    background-color: cyan;
}
.sub{
     100px;
    height: 100px;
    background-color: orange;
}
```
坑：
```
.sup{
    margin-top:50px;
}
.sub{
    margin-top50px;
    margin-left:50px;
}
父子top重叠，取最大值。
```
解决盒模型经典布局坑：
```
方法1.将父级固定(子级无法拖动)
.sup{
    border-top:1px solid transparent;
    /*保证显示区域200*200*/
    height:199px; 
}
方法2.通过padding
.sup{
    padding-top:50px;
    height:150px;
}
```
查看全文

相关阅读:
Mac php使用gd库出错 Call to undefined function imagettftext()
centos 使用 locate
Mac HomeBrew 安装 mysql
zsh 命令提示符 PROMPT
新的开始
 Java 面试题分析
 Java NIO Show All Files
正确使用 Volatile 变量
 面试题整理 2017
有10阶梯, 每次走1,2 or 3 阶,有多少种方式???

原文地址：https://www.cnblogs.com/mangM/p/9691042.html

选择器	权重
通配(*)	1
标签(div)	10
类、属性(class)	100
id	1000
!import	10000

风格	解释
solid	实线
dashed	虚线
dotted	点状线
double	双实线
groove	槽状线
ridge	脊线
inset	内嵌效果线
outset	外凸效果线

赋值个数	方位
1	上下左右
2	上下 \| 左右
3	上 \| 左右 \| 下
4	上 \| 右 \| 下 \| 左

赋值个数(值类型：长度 \| 百分比)	解释
1	左上右上左下右下
2	左上右下 \| 右上左下
3	左上 \| 右上左下 \| 右下
4	左上 \| 右上 \| 右下 \| 左下

成员	解释
border-top-left-radius	左上方位
border-top-right-radius	右上方位
border-bottom-left-radius	左下方位
border-bottom-right-radius	右下方位

一、组合选择器

1.群组选择器

2.子代(后代)选择器

3.相邻(兄弟)选择器

4.交集选择器

5.多类名选择器

二、组合选择器的优先级

1.同目录结构下

2.不同目录下

三、属性选择器

子串匹配属性选择器

四、盒模型

块级元素和内联元素

块级元素：

内联元素：

display:显示方式

1.content

2.border

3.padding和margin

使用谷歌浏览器页面调试工具

五、边界圆角

1.整体设置

2.单角设置

六、a，img，list标签

1.超链接

1.1 a标签的属性

1.2 相对路径：

1.3 a标签的reset操作

1.4 锚点

1.5 鼠标样式

2.图片

2.1 常用属性

3.列表

3.1 html列表标签

3.2 css列表属性

七、伪类选择器

1.a标签的四大伪类

2.内容伪类

3.位置(索引)伪类

4.取反伪类

八、盒模型布局

布局坑

1.兄弟坑

2.父子坑