Html之css篇

来源：互联网发布：身边的女神自律知乎编辑：程序博客网时间：2024/05/09 11:04

css声明
css的分类：
1.标签选择器
2.类选择器
3.id选择器
4.分组选择器
5.通配符选择器
6.派生选择器（复合：两个配合使用）
7.伪类选择器

选择器的优先级是就近原则，范围越小，优先级越高，
如果要改变选择器的优先级可以使用!important

<style type="text/css">

1.标签
h1{
color：red;
}
2.类（标签中放入一个class名属性）
.类名{
color:red;
}
3.id（标签中放入一个id名属性）
#id{
color:yellow;
}
4.分组
h1,h2,h3{
color:green;
}
5.通配符
*{
background:#aaa;
}
6.派生
li strong{
color:#123;
}

</style>

<body>
<ol>
<li><strong>列表1</strong></li>
</ol>
<strong>ieowie</strong>
</body>

css使用方式
html中使用CSS的css分类：
1.行内式
2.内嵌式
前两者没有做到css的分离
3.导入式 @import"文件路径"
内嵌式和导入式不能共存，不能写在一个style标签中
解决方法，可以再写入一个style
4.链接式
<link href="css文件路径" rel="stylesheet" type="text/css" />
3和4的区别：语法上的区别
4先加载css后加载页面，3是先加载页面，后加载样式
类选择器（类名字母全部大写）和导入式可以共存。

css的属性：
字体：font-family:字体系列
汉字一般情况下使用宋体，默认是宋体
英文一般情况下使用Arial，默认是Arial
字体单位中推荐相对单位：em px
1em是当前字体的一倍。
绝对单位是：cm mm
font-size:normal 默认的
italic 斜体
font-weight:设置字体的粗细，400是正常字体，700是斜体

css文本属性：
text-indent 首行缩进
text-align 文本水平对齐：left左对齐 right右对齐 center居中
word-spacing 字间隔：单词与单词之间的间隔
letter-spacing 字符间隔：字符与字符之间的间隔
text-transform字符转换的取值：uppercase把字母转换为大写 lowercase将字母转换为小写
none默认的 capitation首字母大写
text-docoration 装饰文本取值：none默认的 underline下划线
overline上划线 line-through删除线 blink闪烁
**超级链接中设置装饰文本为none，下划线去除。**

强制不换行：white-space：nowrap; 只有遇见br时才换行
行高：line-height: 行高和区块高度（height）一致，就是垂直居中。

css背景图片：background-color：背景颜色
background-image：背景图片 url(路径）;
background-repeat：repeat-x 横向平铺
repeat-y纵向平铺 no-repeat 不平铺
background-position：图片定位（相对） center center（居中） top right 右上
background-attachment：背景关联 scroll图片不随滚动条滚动 fixed固定图片位置（随滚动条滚动，一直在指定位置上）

css边框：
border-top-width 设置边框粗细
thin细边框 medium
border-top-style none无边框 dotted点状
dashed虚线 solid实现（默认） double双线
groove三D凹槽 ridge3D垄状

伪类选择器：（有顺序）
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接
input:focus获取焦点（IE6，IE7不支持）

css盒子<div>：元素的内容，填充（内边距）、边框和边界
默认情况下，看不到盒子。
padding(填充，内边距分上下左右四个）
margin 外边距盒子与盒子之间的距离

float 浮动（百度首页导航栏是浮动完成的）
clear 清楚浮动产生的影响
margin:auto自动，左右自动就是居中。

0 0