首页 > 代码库 > CSS
CSS
CSS样式----层叠样式表
作用：给html加各种各样的样式---html结构和css样式 分离 ----便于维护更新
CSS语法：
选择器{ 属性名:属性值;属性名:属性值; }
导入CSS文件的方法：
1.行内样式表
格式： <标签 style="属性名:属性值;"> 内容 </标签>
行内样式，只能应用当前文档中的当前对应的html标签加样式，或者里面包含的标签加该样式
2.内嵌样式表
格式: 在head中输入
<style type="text/css">
选择器 { 属性名:属性值;属性名:属性值; }
</style>
内嵌样式：在当前的文档可以使用该样式
3.外部样式表
格式： <link rel="stylesheet" href="http://www.mamicode.com/外部样式表文件 XX.css" />
保存的时候，存为css文件，可以应用多个文档，哪个html标签需要，就可以引用
4.导入样式表
管理css样式
格式：@import url(另一个CSS样式)
@import是CSS样式标签，所以必须放到css文件中，必须放到css样式表的最上端
选择器的分类
- 基本选择器
标签选择器：选择给哪一个标签加样式，自动指向该标签
语法：
标签选择器名 { 属性名 :属性值; 属性名: 属性值; }
不用引用，它会把样式自动添加到对应的标签上 但所有的对应标签都加上该样式
类选择器： 给一类html标签加样式
语法 类选择器名{ 属性名:属性值;属性名:属性值; }
类用 . 表示 ，如 .class{} .mybody{}
必须得引用，每一个标签都有一个class属性
<标签 class="选择器名"></标签> 可以引用多次
Id选择器： 给特定的html标签加样式
格式： id选择器名{ 属性名:属性值; 属性名:属性值; }
id 用 # 表示，如#mybody{}
<标签 id="选择器名"></标签>
必须得引用，并且只能引用一次，表示唯一，通常id是给javascript用，而不是用来设置样式
如果想设置样式，用类选择器
通用选择器：(*所有)给所有的标签加样式,不是所有浏览器都支持 IE6不支持
语法： *{ 属性名:属性值;属性名:属性值; }
- 复合选择器
多元素选择器 ： 多个标签共有的属性和属性值，放在一起
语法： 选择器,选择器,选择器....{ 共有的属性: 属性值; }
后代元素选择器: 给html的后代标签加样式
语法： 选择器1 选择器2 选择器3{属性名:属性值;}
给选择器1下的 选择器2和选择器3 标签添加样式
.body .table .tr{属性名:属性值}
子元素选择器： 给html标签的子标签加样式
格式: 选择器>选择器{属性名:属性值;}
.body>table{属性名:属性值;}
某个标签里面的第一层 比后代选择器指向更明确
伪类：----锚点<a>(内容必须做好链接)
a:link 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移动到链接上
a:active 单击鼠标左键的那一时刻的样式
- 文本属性
font-size 文本的大小
font-weight 文本是否加粗 bold normal
font-style 文本是否倾斜 italic normal
font-family 文字的字体
text-decoration 文本是否有线条
text-decoration: underline 下划线
text-decoration: overline 上划线
text-decoration: line-through 删除线
text-decoration: none 去掉所有线条
text-indent： 2em 文本首行缩进2个字符
color 文本的颜色
letter-spacing 字母与字母之间的距离
word-spacing 单词和单词之间的距离
text-align 文本的对齐方式
- 背景属性
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片是否平铺 no-repeat 不平铺
repeat-x/y 横向平铺/纵向平铺
repeat 横向和纵向都平铺(默认)
background-position 背景图片的显示方式 水平 left center right
垂直 top middle bottom
简写为: background:背景颜色 背景图片 背景图片是否平铺 水平 垂直 ;
- 列表
去掉列表前面的项目符号 list-style-type: none 简写为 list-style:none
用小图片代替项目符号 list-style-image: url(图片的地址)
- 合并表格边框线
border-collapse:collapse; 合并表格边框线
- 边框线的属性
边框(top right bottom left)
border-top-color 上边框的颜色值
border-top-style 上边框的线形 solid 实线 dashed 虚线 dotted 点状线
border-top-width 上边框的粗细
简写: border-top: 线形 粗细 颜色
盒子模型：
1.内容区：width 和 height
2.边框: border
3.内边距: padding 内容和边框之间的距离，也可以分为上 右 下 左 四个属性确定内容位置
padding:10px 20px 30px 40px;上 右 下 左
padding:10px 20px 30px; 上10px 左右20px 下30px
padding:10px 20px; 上下10px 左右20px
padding:10px; 上下左右均为10px
4.外边距：margin 边框以外的距离 与内边框的属性相同
注 意：外边距叠加问题，取较大的那一个作为 最后的margin
清除格式：
清除html原有的样式，代码：
*{margin:0;padding:0;} 或
body,h1,h2,p,ul,ol,li....{margin:0;padding:0} 消除这些标签的格式
写在CSS中
网页的布局思想
1.清除格式
2.设置页面属性，即body{}
body{背景颜色/背景图片 文本的大小 文本的颜色 文本的字体 行间距}
例如：body{background:blue;font-size:14px;font-color:black;font-family:宋体;line-height:150%;}
3.划分结构：提前划分好整个网页的结构，在哪个地方放什么东西等等......
网站的结构就是两部分(横向和纵向)
1.纵向就是正常的文档流，设置内容器的宽度和高度，设置内容和边框之间的padding，
边框以外的margin，边框border等属性就可以。
2.横向就需要使用浮动
行内元素和块元素
1.行内元素： 输入完标签后，自己不占一行的，如：span b i u strong a
特点：行内元素的宽度和高度是由内容来决定的，宽度(width)和高度(height)不能用
默认的CSS样式是display:inline;
2.块元素：输入完标签后，自己独占一行的，如：div p table ul ol li dl dt dd h1......
特点：块内元素的宽度和高度可以设置，默认的CSS样式是display:block;
块--转换--行：display:inline;
行--转换--块：display:block;
浮动的特点：
1.设置浮动的元素，不占空间
2.设置浮动元素的层级高于普通元素
3.如果在一行的元素想要横向排列，都设置浮动就可以了
如何让盒子在页面水平居中
margin: xx auto;
CSS