Class3：初学HTML之CSS基础

有序列表

1. 前言
3. 内容
5. 结尾

无序列表

• 前言
• 内容
• 结尾

图片

CSS

三种使用方式
1、 元素内嵌样式表

三种使用方法
1、 网站主页一般使用文档内嵌样式表
2、 其余页面使用外部样式表
3、 元素内嵌样式表一般不使用

优先级：就近原则

文档内嵌样式
1、标签选择器

你好

2、id选择器

你好

#hid{ color: #FF0000; } 3、类选择器 .a{ color: coral; } .b{ background-color: cadetblue; }

你好

4、组合选择器 ol li{ color: aqua; } 给ol下的li标签设置样式 #ulid li{ color: #008000; } 给id=ulid下的li标签设置样式 5、伪类选择器：给超链接设置样式 a:link 打开页面时超链接默认的样式 a:hover 当鼠标悬停到超链接上时设置的样式 a:visited 当超链接被点击后设置的样式 a:active 当鼠标点击超链接不释放时设置的样式

文本类CSS 属性
color：red; 设置文本颜色
text-align:center 设置文本对齐方向 替代html属性中的align
font-size: 14px; 设置文本大小，以px（像素）为单位
font-weight:bold或者数字 设置 文本粗细
font-family：‘微软雅黑’ ; 设置文本字体类型
font-style：italic; 设置字体的风格。比如倾斜、斜体

DIV内css属性
width：300px; 设置 HTML元素的宽度
height：300px; 设置 HTML元素的高度
border：1px solid red 设置HTML元素的边框，包括大小，颜色和边框样式
background-color: #000; 设置HTML元素的背景颜色
background-image: url (“图片地址”); 设置HTML元素的 背景图像
line-height: 20px; 设置HTML元素的行高
text-decoration:none; 设置超链接的下划线的样式
margin： 0 auto; 设置HTML元素和其他周围HTML元素之间的距离

DIV
盒模型包括
内容区
内边距
边框
外边距

*快捷键
div．box1 +Tab

*

设置盒子内容区大小，使用width height属性来设置
width: 200px;
height: 200px;
background-color: #008000;

边框设置：边框宽、样式、颜色缺一不可
border-width：10px 20px 30px 40px 设置的顺序：上 右 下 左
border-width：10px 20px 30px 设置的取值：上 右 下 右
border-width：10px 20px 设置的取值：上 右 上 右

宽 border-width: 10px 20px 30px 40px;
颜色 border-color: #0000FF #00FFFF #5F9EA0 #FF0000;
样式 border-style: solid;

以上内容可以一行操作，无需分开来写
border: 5px solid #FF0000;

内边距会使用内容区的背景颜色
padding: 10px 10px;

上、左外边距调整元素本身，右外边距没有效果，下外边距是会影响下边元素 */
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
margin-right: 20px;

居中设置：上下外边距为0，左右居中
margin: 0 auto;

浮动
向左浮动：float: left;
向右浮动：float: right;

圆点设置

圆角设置

border-radius: 20px;