css

时间：2019-12-16 13:30:14 阅读：206 评论：0 收藏：0 [点我收藏+]

标签：url header table play mil 填充 rgb 大小式表

CSS样式

1，介绍

CSS：层叠样式表，定义如何H显示HTML元素，给HTML设置样式，让它更加美观

语法结构：两个部分，选择器以及一条或多条声明

selector{
        property：value
        property：value
        ...
        }

2，四种引入方式

行内式（内联样式）
- 行内式是在标记的style属性中设定CSS样式，这种样式没有体现出CSS的优势，不推荐使用
内嵌式（内部样式）
- 嵌入式是将CSS样式集中写在网页得到标签对应的标签对中
外部样式
1. 链接式：
  - 建立一个index.css文件，
  - 在HTML文件中引入，
  - CSS文件中样式
2. 导入式
- style/style

3，嵌套规则

块级元素可以包含内联元素或某些块级元素
有几个特殊的块级元素只能包含内联元素，不能包含块级元素，如
h1,h2,h3,h4,h5,h6,p,dt
内联元素不能包含块级元素，她只能包含内联元素
li内可以包含div块级元素
块级元素与块级元素并列，内联元素与内联元素并列
可以对块级标签设置长款
不可以对内联标签设置长款

CSS选择器

1，基础选择器

选择器指明了{}中的样式，也就是样式作用于网页中哪些元素
通用元素选择器
- 所有的标签全部都变色
标签选择器
- 匹配所有使用同样标签的样式
id选择器
- 通过id属性匹配指定的标签
class类选择器
- 通给类属性对应的值，归类标签样式

2，家族选择器

后代选择器，不分层级，.c2 p{color:red}
子代选择器，只在儿子层找 .c2>p{color:red}
多元素选择器：同时匹配所有指定的元素，用逗号隔开减少代码的重用
毗邻选择器：紧挨着，找相邻的，只找下面的，不找上面的。
- .c2+p{color:red}
兄弟选择器：同一级别的，离得很近的。
- .c2~p{color:red}

3，属性选择器

通过标签属性来扎到对应点标签，给标签设置样式
[att]{color:red}：匹配所有具有att属性的元素
[att=val]{color:val}：匹配所有att属性等于val的元素
div[att]{color:red}：匹配所有具有att属性的p标签
div[att=val]{color:red}: 匹配所有att属性等于val的div元素
属性的正则匹配

4，组合选择器

多元素选择器，用逗号分隔减少代码的重复性，给多元素设置相同的样式

5，伪类选择器

伪类选择器：伪类指的是标签下的不同状态
a:link{color:red} —————a标签访问前设置样式
a:active{color:green}————a标签鼠标点击下去显示的样式
a:visited{color:pink}———–a标签访问后显示样式
a:hover{color:purple}———-a标签悬浮到a标签显示的样式
before 伪类
- p:before{content:“hello”;color:red;dispaly:block;}
- 在每个
  元素之前插入内容
after 伪类
- 在每个
  元素之后插入内容
- p:after{content:“world”;color:red;dispaly:block;}

CSS优先级和继承

1，继承

继承是CSS的一个主要特征，他是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于他的后代。
但是CSS继承也是有限制的，有一些属性是不能被继承的，如：border，margin，padding，background，a
CSS继承性的权重是非常低的，是比普通元素的权重还要低的0，所以任何显示声明的规则都可以覆盖其继承样式

2，优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序
样式表中的特殊性描述了不同规则的相对权重，他的基本规则是
- 内联样式 style=“” —–1000
- id 选择器 #id{} ——-100
- 类选择器 .class{} ——————-10
- 元素选择器 div{} —————1
? 权重越高，对应选择器的样式会被优先显示
组合选择器，各选则器的权重相加
- 权位不进位，原始优先级最大

1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。

　　2、有!important声明的规则高于一切。

　　3、如果!important声明冲突，则比较优先权。

　　4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

　　5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

css之操作属性

1，文本字体颜色

颜色属性被用来设置文字的颜色
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
字体大小：font—size，默认是16px
字体格式：font-family:“楷体”
首行缩进：text-indent：32px

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

2，水平对齐方式

text-align：属性规定元素中的文本的水平对齐方式
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果
对齐方式之间可以互相搭配，也可以和垂直对齐一起使用
垂直对齐：line-height

3，背景属性

background-color #颜色
background-image #图片路径
background-repeat #默认平铺
background-position #图片位置

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;

简写：background:颜色 url("url") no-repeat right top

4，文字装饰

text-decoration：none（常用，用于去掉标签a的下划线）

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

5，盒子属性（边框属性）

1，margin

外边距：用于控制元素与元素之间的距离，margin的最基本用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的
标签之间的距离
margin-top:100px
margin-bottom:100px
margin-right:50px
margin-left:50px
居中应用：margin: 0 auto;
body的外边距
- 边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上
- ```
body{
    border: 1px solid;
    background-color: cadetblue;
}
```
- ```
body{
    margin: 0;
}
```

margin:10px 20px 20px 10px；

        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px

margin:10px 20px 10px;

        上边距为10px
        左右边距为20px
        下边距为10px

margin:10px 20px;

        上下边距为10px
        左右边距为20px

margin:25px;

        所有的4个边距都是25px

2，padding

单独使用填充属性可以改变上下左右的填充，缩写填充属性也可以使用，一旦改变一切都改变，设置同margin
内边距，内容和边框之间的距离

padding-left: 10px;           
padding-top: 8px;
padding-right: 5px;
padding-bottom: 5px;
简写形式：padding：10px,8px,5px,5px

3，border

外边框属性
style 样式
- border-style:
- 值描述
  
  none 无边框。
  
  dotted 点状虚线边框。
  
  dashed 矩形虚线边框。
  
  solid 实线边框
?
border-color：边框颜色
border-width：边框宽度
简写形式:border: 10px,solid,yellow
四个边框也可以单独设置
- border-left:10px,solid,yellow
设置圆角
- border-radius: 50% 就是一个圆

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框

4，content

内容，width和height是内容的高度和宽度

6，display

对块级标签和行内标签的操作

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

隐藏标签

/*display: none;*/   /* 隐藏标签,不占原来的位置 */
visibility: hidden;  /* 原来的位置还占着 */

7，浮动

一般用来进行页面布局
浮动会脱离标准文档流，会造成父级标签塌陷问题

清除浮动的两种方式：

父级标签设置高度
通过伪元素选择器来进行清除浮动

clear清除浮动

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值

8，overflow溢出

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

9，思考

思考2：margin collapse（边界塌陷或者说边界重叠）

1、兄弟div：
上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

2、父子div：
if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；

css