整理前端笔记之CSS

CSS

不是说CSS有4种引入方式吗？还有一种是@import方式。

@import方式跟外部样式表很相似。不过在实际开发中，我们极少使用@import方式，而更倾向于使用link方式（外部样式）。原因在于@import方式会先加载HTML后加载CSS，而link是先加载CSS后加载HTML。如果HTML在CSS之前加载，页面用户体验就会非常差。因此对于@import这种方式，我们不需要去了解。

选择器

• （1）元素选择器

• （2）id选择器

• （3）class选择器

• （4）后代选择器

• （5）群组选择器

字体样式

font-family //字体类型
font-size   //字体大小
font-weight //字体粗细
font-style  //字体风格，italic斜体，oblique斜体
color       //字体颜色

取色工具：Color Picker

文本样式

text-indent     //首行缩进
text-align      //水平对齐left左对齐（默认）center居中 right右对齐
text-decoration //文本修饰none去除划线效果（默认）underline下划线line-through中划线overline顶划线
text-transform  //大小写转换none无转换（默认）uppercase转换为大写lowercase转换为小写capitalize只将每个英文单词首字母转换为大写
line-height     //行高
letter-spacing  //字母间距
word-spacing    //词间距

边框样式

border-width     //边框的宽度
border-style     //边框的外观 none无样式dashed虚线solid实线
border-color     //边框的颜色

列表项符号：list-style-type

ol
decimal      //1、2、3
lower-roman  //i、ii、iii
upper-roman  //Ⅰ、Ⅱ、Ⅲ
lower-alpha  //a、b、c
upper-alpha  //A、B、C
​
ul
disc   //实心圆
circle //空心圆
square //正方形

list-style-type：none；去除有序和无序列表的列表项符号

list-style-image：url（）；定义列表项图片

表格

标题位置

caption-side：取值；top标题在顶部（默认） bottom标题在底部

边框合并

border-collapse：取值；separate边框分开，有空隙（默认）collapse边框合并，无空隙

边框间距

border-spacing：取值；

图片对齐

水平对齐：text-align（同文本对齐一样）

垂直对齐：vertical-align：取值；top（顶部对齐）middle（中部对齐）baseline（基线对齐）bottom（底部对齐）vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式

文字环绕

float：取值；left向左浮动，right向右浮动

背景样式属性

background-image     //定义背景图片地址url
background-repeat    //背景图片重复，例如横向重复、纵向重复repeat（默认同时平铺）repeat-x（在水平方向上平铺）repeat-y（在垂直方向上平铺）no-repeat（不平铺）
background-position  //背景图片位置 像素值/关键字 水平距离 垂直距离
background-attachment//背景图片固定 scroll（随元素一起滚动，默认）fixed（固定不动）

背景颜色

background-color：；背景颜色

color：；文本颜色

超链接伪类

a:link        //未访问时的样式
a:visited     //访问后的样式
a:hover       //鼠标经过a元素时的样式
a:active      //鼠标点击激活时的样式

定义4个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变。记忆：love hate

深入了解：hover

：hover可以用于div，img

鼠标样式

浏览器鼠标样式

cursor:取值; //default（默认）pointer手型text I型

自定义鼠标样式

cursor:url(图片地址)，属性值；

这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是.cur

CSS盒子模型

内容区

属性：width、height、overflow（当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方式）

内边距

属性：padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简写内边距属性padding

外边距

属性：margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简写外边距属性margin。允许为负

边框

属性：边框属性有border-width、border-style、border-color以及综合了3类属性的简写边框属性border

浮动

float：取值；//left向左浮动，right向右浮动

清除浮动：clear:both；

定位布局

position    //fixed固定 relative相对 absolute绝对 static静态（默认）