CSS
2016-11-08 20:55:24 0 举报AI智能生成
CSS，全称为“层叠样式表”（Cascading Style Sheets），是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。它的主要优点是减少网页的代码量，提高页面浏览速度，缩短浏览器对页面的加载时间，并具有很好的可移植性，几乎兼容所有的浏览器。
作者其他创作
大纲/内容
容器（纯净）
div
span
没有任何默认样式渲染
作用
结构化HTML元素
DIV+CSS网页布局
概念
Cascading Style Sheet（级联样式表）
表现HTML或XHTML的计算机语言
块元素 VS 内联元素
块元素
独占一行
可以定义宽度和高度
常用块元素
div
p
ul
li
内联元素
一行排列显示
不能定义宽度和高度
常用内联元素
span
a
label
选择器种类
标签选择器
类选择器
ID选择器
类和ID样式的区别
可以使用类选择器词列表方法为一个元素同时设置多个样式
同一个html页面，ID只能用一次，类可以使用多次
组合选择器
并集选择器
*{}，所有的网页元素
语法 #id,.someClass
交集选择器
标签（此处什么都不写）类选择器|ID选择器
如：h1.red 或 h1#id
后代选择器
选择器（空格）选择器
只对 h1 元素中的 em 元素应用样式只对 h1 元素中的 em 元素应用样式
//后代应用于该元素下所有的子元素和孙元素等
h1 em {color:red;}
子元素选择器
举例：h1 > div
表示h1下的仅div子元素，不设计div子元素的下级其他元素，范围较后低啊原则其更小
引入CSS的方式
行内式
语法：<h1 style="font-size:18px;">xxxx</h1>
熟称内样式，在style属性中设置CSS样式
嵌入式
<style type="text/css"> h1{font-size:18px;}</style>
导入式
<style type="text/css"> @import"style.css";</style>
先加载页面，后加载样式
链接式
<link href="style.css" rel="stylesheet" type="text/css" />
先加载样式，后加载页面
样式的优先级
基本选择器
ID选择器 > 类选择器 > 标签选择器
样式表
行内样式 > 内嵌样式 > 外部样式
CSS样式
同一个选择器，两条相同的声明，后者覆盖前者
属性
文本属性
color
文本颜色
例子：color:#ff0000;
line-height
行高
text-align
对齐方式
left
right
center
letter-spacing
字符间距
举例：letter-spacing:5px;
text-decoration
文本修饰符
underline
none
overline
line-through
blink
inherit
white-space
空白处理
white-space:nowarp;（不换行）
字体属性
font
设置所有字体属性
font-family
设置字体类型
font-size
字体大小
font-weight
字体粗细
bold
light
...
font-style
字体风格
font-style:normal;
背景属性
background
设置所有背景属性
background-color
background-image
background-image
backgound-repeat
background-position
设置背景出现的初始位置
background-position:20px-100px;
分别表示横向和纵向的位置坐标
列表属性
list-style
list-style-image
list-style-position
list-style-type
盒子模型
外边距：margin
边框厚度：border
内边距：padding
简写方式
padding：上 右 下 左;
顺时针方向
颜色显示：solid
0 条评论
下一页
