样式表书写位置
内嵌式写法
<head>
<style type=”text/css”>
样式表写法
</style>
</head>
外链式写法
写在head里,<link rel=”stylesheet” href = “1.css”>
行内样式表/内联式
<h1 style = “font - size : 30px ; color : red;”>14期霸气</h1>
各个样式特点:
内嵌式 :样式只作用于当前文件,没有真正实现结构表现分离。
外链式写法: 作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离
行内样式表: 作用范围仅限于当前标签,范围小,结构表现混在一起(不推荐使用
标签分类(显示的方式)
1:块元素
典型代表 div h1 -h6 p ul li
特点: 独占一行/可设宽高/嵌套(包含)下子块元素宽度(没有定义的情况下) 和父块元 素宽度默认一致。
2行内元素
典型代表span a strong em del ins label
特点:在同一行上显示 / 不能直接设置宽高 / 元素的宽和高就是内容撑开的宽高
3:行内块元素(内联元素)
典型代表input img
特点: 在用一行上显示 / 可以设置宽高 /
块元素转行内元素
div,p{
Display : inline ;
}
行内元素转块元素
a,span{
Display : block
}
块元素和行内元素转 行内块元素
div,a,ui,ul{
Display : inline - block ;
}
CSS三大特性:
1层叠性
当多个样式作用于同一个(类)标签时,样式发生了冲突,总是执行后边的代码(后边的代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
2 继承性
继承性发生的前提是包含(嵌套关系)
文字颜色可以继承
文字大小可以继承
文体可以继承
字体粗细可以继承
文字风格可以继承
行高可以继承
总结:文字的所有属性都可以继承
特殊情况:
h系列不能集成文字的大小
标签不能继承文字颜色
优先级:
默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
继承<通配符<伪对象<标签<伪对象<标签< 伪类|类|属性选择< ID <内联<important
优先级特点: 继承的权重为0 ; 权重会叠加
权重相同时,css 遵信就近原则:靠近元素的样式具有最大的优先级,或者 说排在最后的样式优先级最大
所有都相同时,声明靠后的优先级最大
CSS 链接伪类
A : link { 属性:值 ;} a { 属性 :值 }效果是一样的。
A:link { 属性:值 ;} 链接默认状态
A:visited { 属性:值; } 链接访问之后的状态
A:hover { 属性:值; } 鼠标放到链接上显示的状态
A:active { 属性:值; } 链接激活的状态
:focus{属性: 值; } 获取焦点
文本修饰:
text-decoration :none |underline | line-though 下划线
背景属性:
Background-color 背景色
Background-image 背景图片
Background-repeat:repeat(默认)\ background-no-repeat \repeat-x \ repeat-y背景平铺
Background-position 背景位置left ,right ,center ,top,bottom
Background-position: right ; 方位值只写一个的时候,另外一个默认居中
Background-position: right bottom ; 此时任意
Background-position: 20px 30px ; 第一个为水平方向,第二个代表在垂直方向
l Background-positionX:在X轴上的位置
l Background-positionY:在Y轴上的位置
Background-attachment 背景是否滚动 scroll \ fixed
背景属性连写:
background:red url(“1.png”) no-repeat 30px 40px scroll ;
Line-height = 50px; 行高