CSS学习方法及常用属性

2018-04-15 本文已影响0人浮云都想对你说

image.png

1.CSS的历史（Cascading Style Sheets 层叠样式表）

维基百科

2.CSS学习资源

3.引入CSS的四种方式

内联（style）样式
style标签方法
link rel（relationship 关系）外部引入
利用@import url 外部CSS再引入CSS

image.png

4.常见的CSS属性

常见的块级元素和行内元素：
块级元素：h/p/div/hr/form/ui/ol/li/dl/dt/dd/pre/table/tr/td/th
行内元素：em/strong/span/a/br/img/buttom/input/label/select/textarea/code/script
如何分别让块级元素和行内元素水平居中
对于块级元素
通过设置width:0px; margin： 0px auto;即可实现水平居中
对于行内元素
通过设置在其父元素下设置text-align:center;即可该行内元素实现水平居中
块级元素和行内元素的特性：
块级元素会占用一整行，其他块级元素会被挤下到另一行，而行内元素之间可以在同一行存在
块级元素可以设计长宽，而行内元素无法设置长宽
行内元素设置margin和padding时只有左右有效，上下无效
块级元素可以包含行内元素和块级元素，行内元素只能包含行内元素和文本

5.继承

继承是依赖于父子关系的一种机制。对于某个样式应用于某个父元素时，子元素如果不做特别的限制，子元素会继承父元素的一些样式

无继承性的属性
1、display：规定元素应该生成的框的类型
2、文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3、盒子模型的属性
4、背景属性
5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成内容属性：content、counter-reset、counter-increment
7、轮廓样式属性：outline-style、outline-width、outline-color、outline
8、页面样式属性：size、page-break-before、page-break-after
9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
可以继承属性
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3、元素可见性：visibility
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

6.div

div的高度及流动
文档流：就是文档内元素的流动方向
内联元素：从左往右流动
块级元素：独占一行，从上往下流动
块级元素的高度由内部文档流元素的高度决定
特殊单词较长的情况需要word break：break-all；才会被打断换行
行高字体默认有一个建议行高，不同的字体建议行高不同

7.background

background-size: 设置背景图片大小
contain 或 cover:
保留固有比例，最大的包含或覆盖背景区。如果图像没有固有比例，则按背景区大小
加auto
以背景图片的比例缩放背景图片，最好不要只用一个auto
background-position 指定背景图片的初始位置
position 指定一个元素在文档中的定位方式
定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed或 sticky 的一个元素。
相对定位元素（relatively positioned element）是计算后位置属性为 relative的元素。
绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）**是计算后位置属性为 sticky 的元素
max-width 最大宽度

8.display的几个常用属性

none 关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在要想让元素在隐藏的同时占据其原有的位置
inline 该元素生成一个或多个行内元素盒。
block 该元素生成一个块元素盒。
list-item 该元素生成一个容纳内容和单独的列表行内元素盒的块状盒。
inline-block该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）
加了dinline-block后一般都要在加一个vertical-align：top；来清除bug

9.伪类

:nth-child(an+b) 匹配文档树中在其之前具有 an+b-1 个兄弟节点的元素，其中 n 为正值或零值
0n+3 或简单的 3 匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13...的元素。
：一个冒号是伪类
：：两个冒号是伪元素

10.居中

让一个背景图居中，并且让它自适应屏幕

background: url("wallhaven-w-min.jpg") no-repeat center center ;
background-size: cover;

让一个div水平居中

margin-left:auto;
margin-right:auto;

让一个div在父级元素中绝对居中（上下左右）
方法一：
给父级元素加:

position:relative;   //若父级元素是body可以不用
加

再给div加：

div{
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;
}

方法二：
给它的父元素加：

display: flex;               //让它变成一个弹性盒
justify-content: center;     //水平居中
align-items: center;         //垂直居中
让内联元素居中，给它们的父元素加上
text-align:center;
若不是内联元素想让它居中，则加display:inline-block，加了之后一般还要加下面这句，不然可能会有bug（下面可能会空出一行）

vertical-align: top;
让导航栏在同一行里均匀分布
给ul加css

ul{
  display:flex;  
  justyfy-content:space-between;
}

去掉li的float:left
去掉ul的clearfix

11.用css做三角形

等腰三角形：

div{
  border:50px solid transparent;
  width:0;
  height:0;
  border-bottom-color:red;
}

直角三角形：

div{
  border:50px solid transparent;
  width:0;
  height:0;
  border-top-width:0;
  border-left-color:red;
}

小提醒
尽量不写height和width，这两个属性会引出很多bug，要宽高的时候可以用padding，但img最好先写width，因为可以先占位，因为引用图片时浏览器不知道图片大小，所有等图片下载完成，它后面的元素又要重新排位置，若先写好width，则不用重排，知道height也可以先写好height。
另外span元素设置padding的时候要将它设为display:inline-block，因为内联元素不能设置宽高，inline-block具有inline的同行特性，也具有block的高度特性。
对于display:inline(内联元素)的元素，设置width/height/上下margin和padding都是无效的

单词：

transition：box-shadow 1s；过度效果给谁添加过程1S
protfolio 作品集
box-sizing: border-box; 使这个盒子的宽度包含margin和padding