CSS的简介
概述: Cascading Style Sheets, 层叠样式表.
作用:
用来美化页面的.
分类:
行内样式: //直接写在元素(html的标签)中的样式.
内部样式: //写在<head>标签的,<style>标签中.
外部样式: //写在后缀名为.css的文件中.
CSS的引入方式之: 行内样式.
格式:
<div style="属性名:属性值; 属性名:属性值"></div>
作用: 只针对于当前元素有效.
CSS的引入方式之: 内部样式.
格式: //写在<head>标签的,<style>标签中.
选择器{
属性名:属性值;
属性名:属性值;
}
作用: 针对于当前页面内的部分元素有效.
CSS的引入方式之: 外部样式.
格式: //后缀名为.css的文件中
选择器{
属性名:属性值;
属性名:属性值;
}
作用: 可以用来统一整个网站的风格.
CSS中的选择器:
元素选择器:
格式:
元素名{
属性名: 属性值;
属性名: 属性值;
}
作用: 针对于该类元素有效.
id选择器:
格式:
#选择器名{
属性名: 属性值;
属性名: 属性值;
}
作用: 给指定id(id名和选择器名一样的元素)设置样式的.
//记忆: 每个标签都有id属性, id属性尽量保证唯一.
类选择器:
格式:
.选择器名{
属性名: 属性值;
属性名: 属性值;
}
作用: 用来设置某类元素(class属性的值为 选择器名的元素)的样式的.
后代选择器:
(元素,id,类)选择器 元素名{
//样式
}
作用: 设置指定的元素内的 指定的"子标签"的样式的.
伪类选择器:
a:link{} //未选中连接
a:active{} //选定的链接
a:visited{} //已访问的链接
a:hover{} //鼠标移动到链接上
作用: 主要用来操作超链接的.
CSS的样式
背景:
background-color: 设置背景色
字体:
font-size: 设置字体大小
文本:
text-decoration:将其值设置为:none,可以取消超链接字体的下划线.
color: 设置字体的颜色
边框:
border: 1px solid blue; //1像素, 蓝色实线
//solid: 单实线, double:双实线 dotted:(点)虚线 dashed:(-)虚线
width: 设置标签的宽度
height: 设置标签的高度
CSS的浮动
概述: 通常情况下页面的布局: 从上往下逐行分布. 有些时候我们需要页面中的布局方式是从左往右, 或者从右往左之类的自定义页面布局, 就需要用到: 窗体浮动.
float: //设置浮动.
属性值: left, right
clear: //清除浮动.
属性值: both
CSS的盒子模型
概述: 也是用于布局的. 正常的一个页面可能有多个div, 每个div的里边可能有其他元素(元素和div之间的间距叫内边距), div与div之间有可能也是有间隙的(外边距).
外边距: margin
内边距: padding
margin: 值1 值2 值3 值4; //离上,右,下,左的间距分别是: 值1 值2 值3 值4;
margin: 值1(上下) 值2(左右); //离上,右,下,左的间距分别是: 值1 值2 值1 值2;
margin: 值1; //离上,右,下,左的间距分别是: 值1 值1 值1 值1;
浙公网安备 33010602011771号