笔记总结：Web前端——CSS美化界面

CSS美化界面

一、CSS简介

1.定义

Cascading Style Sheet，层叠样式表，渲染HTML在网站的展示效果。包括对元素高度、宽度、字体、颜色、背景图片、边距、定位、呈现方式等设定。

2.CSS选择器

分为基本选择器和层次选择器

CSS基本选择器分为ID选择器、类选择器和标签选择器

CSS选择器优先级：ID选择器>类选择器>标签选择器

3.CSS选择器语法

/*标签选择器*/
标签名{
    声明1;
    声明2;
}

/*类选择器*/
.类名
   声明1;
   声明2; 
}

/*ID选择器*/
#ID值{
    声明1;
    声明2;
}

/*复合选择器*/
标签名1，标签名2{
    声明1;
    声明2;
}

4.CSS样式引入

分为行类样式、内部样式和外部样式

1. 行类样式

   <div style="color:red;font-size:20px;"> 
   

2. 内部样式

   <style>
       #demo{
           color:red;
           font-size:20px;
       }
   </style>
   
   <div id="demo"></div>
   

3. 外部样式

   创建Stylesheet文件（.css文件），文件中包含样式声明

   html文件引入外部样式

   <!--第一种方式-->
   <link href="css文件位置" rel="stylesheet" type="text/css">
   <!--第二种方式-->
   <style>
       /*只有css文件能这样引入*/
       @import url(css文件位置)
   </style>
   

CSS样式引入优先级：行内样式>内部样式>外部样式

5.高级选择器

1. 后代选择器

   <!--设置div后的无序列表项-->
   <!--非严格指代，可以选择div下的所有ul下的li，中间可以插入其他标签-->
   <style>
       div ul li{
           color:aqua;
       }
   </style>
   

2. 子代选择器

   <!--严格选择，必须是div下ul的li，中间不可以插入其他标签-->
   <style>
       div > ul > li{
           color:red;
       }
   </style>
   

二、CSS样式

容器中的元素可以从容器中继承CSS样式

1.字体

属性	含义
font-family	字体类型，如宋体
font-size	字体大小
font-style	字体风格，如italic（斜体）
font-weight	字体粗细，如bold（加粗）
font	在一个声明中设置所有字体属性，顺序：风格、粗细、大小、类型

2.文本

属性	含义
color	文本颜色
text-align	元素水平的对齐方式，如right
text-indent	首行文本缩进，后面写缩进多少像素
line-height	文本行高，文本居中
text-decoration	文本装饰，如underline

label和span默认情况没有宽度和高度，不能设置，必须将它们变成块元素或行内块元素

/*display表示元素展现方式*/
label{
    display:inline-block;
    width:255px;
    /*两端对齐操作*/
    text-align:justify;
    text-align-last:justify;
}

3.背景

属性	含义
background-color	背景颜色
background-image	背景图片，url（图片地址）
background-position	背景位置，块左上角为原点，水平间距x px，垂直间距y px
background-repeat	背景重复方式，如no-repeat，当图片比较小时可能重复显示
background	背景属性，顺序：颜色、图像、位置、重复方式

4.边框

属性	含义
border-color	边框颜色
border-width	边框粗细
border-style	边框样式，如solid
border	变框属性，顺序：粗细、样式、颜色

5.边距

属性	含义
margin-top	外边距，上
margin-bottom
margin-left
margin-right
margin	写一个，上下左右共享；写两个，一个上下，一个左右；写三个或四个，分别代表上右下左（顺时针）
padding	内边距，与外边距类似

6.浮动

重定位元素位置，全部压缩往两边排，且排成一行，浮动的元素不占用页面空间，与其他元素不在同一层级，可被堆叠

使用前设定元素宽度

float:left
float:right

7.清除浮动

使得浮动的元素与其他元素位于同一层级，不可堆叠

clear:left
clear:right
clear:both

8.定位

元素定位分为无定位、绝对定位、相对定位和固定定位。默认无定位，绝对定位和固定定位必须设置宽度和高度，否则将不显示元素。

属性名：position

需要声明相邻两个方向位置来确定元素位置

属性值	说明
static	默认值，无定位
relative	相对自身定位
absolute	绝对含有定位（relative或者absolute）的最近父容器定位，如果没有则参照物为body
fixed	相对浏览器窗口固定定位，即使浏览器窗口向下滚动，仍然在原来位置

position:relative;
top:10px;		/*此时元素下移10px*/
left:20px;		/*此时元素右移20px*/
bottom:20px;	/*此时元素上移20px*/

9.列表样式

属性	含义
list-style-type	列表每项前的修饰类型，如circle
list-style-image	列表每项前的图片，url(‘图片路径’)
list-style-position	列表每项前的修饰位置，相对于当前容器，如inside
list-style	所有列表属性，顺序：类型、图片、位置

10.伪类样式

常见伪类样式：鼠标悬浮伪类样式hover

任何元素都可以由伪类样式，hover鼠标放在元素上会发生变化

div:hover{
    background: red;
}

超链接伪类样式：

伪类名称	含义
a:link	未单击访问时超链接样式
a:visited	单击访问后的超链接样式
a:hover	鼠标悬浮
a:active	鼠标单击未释放

顺序：a:link、a:visited、a.hover、a:active

三、盒子模型

HTML中每个元素都是容器，包括：外边距、边框、填充（内边距）和实际内容

元素的总宽度 = 左外边距 + 左边框 + 左内边距 + 宽度 + 右内边距 + 右边框 + 右外边距

元素的总高度 = 上外边距 + 上边框 + 上内边距 + 高度 + 下内边距 + 下边框 + 下外边距