2019-03-21 CSS基础

2019-03-22 本文已影响0人 Sallyscript

样式写法

外部样式引用

导入式引用CSS文件

他们四者的区别

这几个写法的优先级，简单记就是：离标签最近的先显示。

类选择器：class

用来给想要改变样式的标签。

class=""在<style>标签里面对应：.{}
类选择器可以在HTML页面多次调用。
想给标签只用两个类选择器,class中间加空格

ID选择器

同一个ID选择器在CSS样式设置时，可以被多次使用。而且同一个网页文档中ID是唯一。

ID=""在<style>标签里面对应：#{}
class和ID的值区分大小写。

全局选择器：

*{
CSS样式;
}

群组选择器：

p,#name,.name2,p.name2{
CSS样式;
}

后代选择器

使用后代选择器要用空格，隔开。

image.png

伪类：

链接伪类

伪类:hover和:active

1.:hover用于访问的鼠标悬停于某个元素时
2.:active用于一个元素被激活时（即按下鼠标之后到放下鼠标之前的时间）
链接伪类的顺序:link>visited>hover>active
说明：伪类名称对大小写不敏感。

CSS层叠：

可以定义多个样式。不冲突时，多个样式可重叠成一个。冲突时，按不同样式规则优先级来应用样式。

继承的好处：

父元素设定样式，子元素继承部分属性。
减少CSS代码。

css优先级：

ID选择器>class选择器>标签选择器
同类样式多次引用时，样式表中后定义的优先级高。

按权值判断优先级：

标签选择器权值：1
类选择器和伪类：10
ID选择器:100
通配符选择器：0
行内样式：100
在css选择器里写上：!important意思该选择器优先级是最高的。

CSS字体属性

字体类型：font-family

ps：可以给一段文字设置多个字体类型，浏览器会一次查找，如果都没有，则使用浏览器默认样式。如果写在style里面出现“”双引号嵌套，那么内部的双引号改成单引号。

文字大小：font-size

ps：文字大小的px单位由电脑的分辨率所影响。

文字颜色：color

ps：1，具体颜色名； 2，红绿蓝rgb（，，）数字：0-255，百分比0%-100% ；3，十六进制：#******，*是0-F如#080是#008800的简写；

文字粗细：font-weight

ps：1，可以使用HTML标签来加粗文字，如<b><strong>2，通过css语法：font-weight：normal|bold|bolder|lighter|100-900(400等同于normal，700等同于bold)

文字样式：font-style

ps：1，HTML中用<em>,<i>做斜体2，css里italic表示字体样式为斜体

font简写

如果font-family的值有多个时，值用逗号分开。

文本对齐方式

text-align

语法：text-align：left|right|center|justify（该属性仅对块级元素设置有效）
对于行内元素可以在外边嵌套一个div来解决，给div一个text-align；
居中还有一个方式：margin：0 auto；
ps：给p标签文本设置首行缩进两个字：text-indent:2em;

line-height：行高

可以用%来表示，代表是字体大小的%。
或者em，和px；关于继承em，在父标签算的em对应的px数直接继承，而不是继承em。

vertical-align

图解

多行垂直居中：在父级标签display：table；

word-spacing

单词之间的间距

letter-spacing

每个字或者字母之间的间距

text-transform

设置元素内文本大小写
capitalize（设置首字母大写）| uppercase （将字母设置成大写）| lowercase（将字母设置为小写）| none（没有任何的设置效果）

text-decoration

underline （下划线）| overline（上划线） | line-through （贯穿线）| blink（闪烁） | none（没有任何的设置效果）

盒子模型

外边距（margin）：是元素与元素之间的距离，或者是元素外面留出的一段空白
内边距（padding）：元素里的内容与元素边框之间的距离
边框（border）：元素本身
内容（content）：元素中放置的东西，元素的宽和高指的是元素中内容的宽和高，并不是元素本身的宽和高

height和width属性总结：

1.二者设置的是内容的宽和高
2.二者设置对块级元素和替换元素有效
3.max-height/min-height有兼容性问题，IE浏览器不支持。
ps：当一个元素同时设置 max-height和min-height，max-height值小于min-height值，最大高度自动转换成最小高度的值，所以显示min-height值。
块级元素有：<p>、<div>、<dl>、<ul>等
替换元素有：<img>、<input>、<textarea>等

border边框

padding内边距

4种设置方法：
1：padding：值（上下左右）
2：padding：值1 值2 （上下左右）
3：padding：值1 值2 值3 （上左右下）
4：padding：值1 值2 值3 值4（上右下左）

margin外边距

在垂直方向，两个相邻元素都设置外边距，外边距会发生合并。合并后外边距高度=两个发生合并外边距的高度中最大值。
块级元素居中：margin：0 auto；
p标签内文字居中用：text-align：center；
ps：在块级标签中的style里加上display：inline；可以变成内联元素，元素前后没有换行符。或者，在行内标签的style里加上display：block，将显示为块元素，元素前后会带有换行符；行内块元素，设置一个display：inline-block，元素呈现为inline，具有block相应特性。
ps：行内元素无法设置宽和高，外边距只能设置左右的，无法设置上下的。

背景

background-attachment：背景图像固定或者随页面滚动。
ps：scroll：默认值，背景图片随滚动条滚动；fixed当页面的其余部分滚动时，背景图片不会滚动。

background-repeat：设置背景图像是否重复以及如何重复。
ps:repeat重复，no-repeat不重复，repeat-x水平重复，repeat-y垂直重复；并且该语句必须在有图片的情况下有效。

列表样式

list-style-type：设置列表项标志的类型；

list-style-image：将图像设置为列表项的标志。

list-style-position：设置列表中列表项的位置。

有inside和outside

inside

outside默认值

list-style：简写属性，把所有列表属性用于一个声明中。

float浮动

行内元素和块级元素的一些规则

行内元素

1.与其他元素同行显示
2.不可以设置宽高
3.宽高就是文字或者图片的宽高
4.span、a、b、i、em、u

块级元素

1.独占一行
2.可以设置宽高
3.如果不设置宽度，宽度默认为容器的100%
4.div、p、h1-h6、ul、ol、li、dl、dt、dd

两个div方块放置在一行，给两个div都加上一个float：left；
用clear：both；清除所有浮动；
1、在一排加了浮动的div后，写一个空格div，给它一个clear：both;就会清除这一排的浮动；
2、子元素加了浮动之后，在他们的父标签写上：overflow：hidden；zoom：1；//兼容IE浏览器

position定位属性

position：static；静态定位；自然定位；

能够忽略相对定位对它的影响。

position：relative；相对定位

ps：相对定位的元素绝对不会离开常规流（心念家乡），并且可以使浮动的元素发生偏移控制他们的堆叠顺序。任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位。

position：absolute；绝对定位

ps：1、脱离常规流：使用top，left，right，bottom来改变它相对于祖先的位置。
2、如果没有给绝对定位的块设置祖先（position：relative），那么它会默认自己的祖先是body。
3、给绝对定位的块设置top：0；bottom：0；left：0；right：0；margin：auto auto；能够实现块在父块的中心，上下居中，左右居中。如果设置left：0；right：0；margin：0 auto；那么相当于设置了水平居中。

position：fixed；固定定位

ps：相对于肉眼可见的视图窗口的位置。随着窗体的滚动，固定定位的块还是在看得到的那个相同的位置。

position：sticky；吸附定位

ps：如果做一个导航栏，让他随着鼠标的滚动，一直吸附在窗体头部，代码：

position:sticky;
top:0;

有脱离以及吸附。

hover里可以加改变鼠标形状的代码：

cursor:pointer;

把鼠标原本显示的样式箭头，变成小手。