今天是我参加青训营的第二天
css全称Cascading Style Sheets

<link rel="stylesheet" href="../**.css"/>
- <style>
- li{margin: 0; list-style:none;}
- style>
<p style="color:red">hello worldp>
- 选择器(标签)
- {
- 属性1 : 取值1;
- ……
- 属性n : 取值n;
- }
- 例子:
- <style>
- p{font-size:1px;}
- style>
class名前面必须要加上前缀英句号(.),否则该选择器无法生效。类名前面加上英文句号,表明这是一个class选择器。
- <style>
- .li{font-size:2px;}
-
同一个页面中,是不允许出现两个相同的id的;
对于id选择器,id名前面必须要加上前缀“#”,否则该选择器无法生效。
- <style >
- #one{color:red;}
- style>
(1)后代选择器
语法 A(空格) B
选择元素内部中所有的某一种元素,就是满足该选择器条件的子元素才使用该样式。
- <style>
- #one div{color:red;}
- .blue span{color:blue;}
- style>
满足id=one的标签下的div子标签,或者满足class=blue的标签下的div子标签才使用样式。
(2)直接组合选择器
语法AB
- .one{
- color;bluel
- }
- input.one{/*元素同时要满足ipnut标签和使用了类one才能使用该样式*/
- font-size:2px;
- }
(3)亲子组合
语法A>B
B是A的直接子元素
- section>p{
- line-height:1.5;
- }
(4)兄弟选择器
语法:A~B
B在A后面,且和A同级
- p~h2{
- color:yellow;
- }
相邻选择器
语法 A+B
B必须进跟在A后面
- h2+p{
- color:blue;
- }

同时对几个选择器进行相同的操作,两个选择器之间必须要用英文逗号(,)隔开。
h3, div, span {color:red;}
根据标签里已经有的属性进行筛选,满足条件的使用该样式。
- <style>
- [disabled] {
- backgroud-color:blue;
- font-size:2px;
- }
-
- input [type="text"]{
- line-hegiht:1.5;
- font-weight:200;
- }
- style>
- <label>用户名<input type="text" value="zhangsan"disabled/>
-
-
复杂一点的
- <style>
- a[href^="#"]{
- color:blue;
- url(www.baidu.com)no-repeat;
- padding-left:2px;}
- a[href$=".jpg"]{
- color:blue;
- url(www.baidu.com)no-repeat;
- padding-left:2px;}
- style>
- <p><a href="#a." alt="">回到顶部a>p>
- <p><a href="a.jpg" alt="">回到底部a>P>
其中^=是以什么什么开头的模糊查询,$=是以什么什么结尾的模糊查询。g、
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过a元素时的样式 |
| a:active | 定义鼠标点击激活时的样式 |
:focus表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
- input:focus{
- color:yellow;}
- li{
- font-size:10px;
- }
- li:first-child{
- color:red
- }
- li:last-child{
- color:yellow;
- }
- li:nth-child(1){/*和第二个css样式效果一样*/
- color:red;
- }
更多伪类:伪类 - CSS(层叠样式表) | MDN (mozilla.org)

| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color | 字体颜色 |
如果我们不定义font-family,浏览器默认字体类型一般是“宋体”。
b、font-style
| normal | 正常(默认值) |
| italic | 斜体 |
| oblique | 斜体 |
有些字体有斜体italic属性,但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。
| normal | 正常(默认值) |
| lighter | 较细 |
| bold | 较粗 |
| bolder | 很粗(其实效果跟bold差不多) |
| text-indent | 首行缩进 |
| text-align | 水平对齐 |
| text-decoration | 文本修饰 |
| text-transform | 大小写转换 |
| line-height | 行高 |
| letter-spacing | 字母间距 |
| word-spacing | 词间距 |
- p
- {
- font-size:14px;
- text-indent:28px;
- }
-
- <style type="text/css">
- #p1{text-align:left;}
- #p2{text-align:center;}
- #p3{text-align:right;}
- style>
| none | 去除所有的划线效果(默认值) |
| underline | 下划线 |
| line-through | 中划线 |
| overline | 顶划线 |
| none | 无转换(默认值) |
| uppercase | 转换为大写 |
| lowercase | 转换为小写 |
| capitalize | 只将每个英文单词首字母转换为大写 |
#p1{line-height:15px;}
letter-spacing: 像素值;
word-sapcing:像素值;
| border-width | 边框的宽度 |
| border-style | 边框的外观 |
| border-color | 边框的颜色 |
border:1px sold silver ;
- border-top: 2px solid red; /*上边框样式*/
- border-right: 2px solid yellow;
| disc | 实心圆●(默认值) |
| circle | 空心圆○ |
| square | 正方形■ |
| decimal | 阿拉伯数字:1、2、3…(默认值) |
| lower-roman | 小写罗马数字:i、ii、iii… |
| upper-roman | 大写罗马数字:I、II、III… |
| lower-alpha | 小写英文字母:a、b、c… |
| upper-alpha | 大写英文字母:A、B、C… |
- list-style-type: 取值;/*可以取none*/
- list-style-image: url(图片路径);
| top | 标题在顶部(默认值) |
| bottom | 标题在底部 |
border-collapse:collapse(表格之间取消间距)
border-collapse:separate(表格之间有间隙,默认)
width: 像素值; height: 像素值;
border:1px solid silver;
text-align属性取值有3个,如下表所示。
| 属性值 | 说明 |
|---|---|
| left | 左对齐(默认值) |
| center | 居中对齐 |
| right | 右对齐 |
vertical-align:
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
float:left;
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
backround-color:颜色;
- div
- {
- width:250px;
- height:170px;
- background-image: url();
- }
注意图片作为div的背景时,一定要设置div的大小,不然都默认大小为0.
background-repeate:
| repeat | 在水平方向和垂直方向上同时平铺(默认值) |
| repeat-x | 只在水平方向(x轴)上平铺 |
| repeat-y | 只在垂直方向(y轴)上平铺 |
| no-repeat | 不平铺 |
background-position:水平距离 垂直距离;
background-position:10px 21px;
background-position:top center;

background-attachment:
| 属性值 | 说明 |
|---|---|
| scroll | 随元素一起滚动(默认值) |
| fixed | 固定不动 |
cursor:


元素的宽度(width)和高度(height)是针对内容区而言的,块元素有height和width,行内元素没有
padding:20px表示4个方向的内边距都是20px。
padding:20px 40px表示padding-top和padding-bottom为20px,padding-right和padding-left为40px。
padding:20px 40px 60px 80px表示padding-top为20px,padding-right为40px,padding-bottom为60px,padding-left为80px。大家按照顺时针方向记忆就可以了。
详情见:内边距:padding - CSS | 绿叶学习网 (lvyestudy.com)
外边距:margin - CSS | 绿叶学习网 (lvyestudy.com)
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浏览器是先加载正常文档流,在加载脱离文档流。
float,absolute属于脱离文档流。
浮动会影响周围元素,并且还会引发很多预想不到的问题。在CSS中,我们可以使用clear属性来清除浮动带来的影响。
| left | 清除左浮动 |
| right | 清除右浮动 |
| both | 同时清除左浮动和右浮动 |
16、定位布局
a、position:fixed:
在CSS中,我们可以使用“position:fixed;”来实现固定定位。所谓的固定定位,指的是被固定的元素不会随着滚动条的拖动而改变位置,一般只会用到其中两个属性。
- position: fixed;
- top: 像素值;
- bottom: 像素值;
- left: 像素值;
- right: 像素值;
b、position:relative:
position:relative;”来实现相对定位。所谓的相对定位,指的是该元素的位置是相对于它的原始位置计算而来的。
- position:relative;
- top:20px;
- left:40px;

c、position:absolute:
“position:absolute;”来实现绝对定位。绝对定位在几种定位方式中使用最为广泛,因为它能够很精确地把元素定位到任意你想要的位置。
一个元素变成了绝对定位元素,这个元素就完全脱离文档流了,绝对定位元素的前面或后面的元素会认为这个元素并不存在,此时这个元素浮于其他元素上面,已经完全独立出来了。
按照先加载正常文档流,后加载脱离文档流的顺序,也会影响该元素的父元素。
绝对定位:absolute - CSS | 绿叶学习网 (lvyestudy.com)

position:absolute; top:20px; right:40px;
d、position:static:
元素没有指定position属性时,这个元素就是静态定位的。也就是说,元素position属性的默认值是static。
补充:
继承:

冲突:

大小:

颜色:
水平居中:

垂直居中:

外边距的折叠:

display和visibility

清楚默认样式:
