Css
外部样式表
step1:创建样式表文件,用于保存样式规则
xxx.css
step2:在页面对样式表文件进行引入
<head>
<link rel="stylesheet" type="text/css" href="样式表文件路径" />
</head>
优先级
样式定义冲突时,按照不同样式规则的优先级来应用样式
浏览器缺省设置 最低
外部样式表或内部样式表 中
就近原则:就近优先
内联样式 最高
!important最高优先级规则 :
调整样式规则的优先级
p{
color:red !important;
}
通用选择器
作用:匹配页面上的任何一个元素
语法:*{}
*{
font-size:12px;
/*...*/
}
元素选择器
别名:标签选择器、标记选择器
作用:匹配页面上指定的元素
语法:元素名称作为选择器
<head>
<style>
h1{
更改样式
}
</style>
</head>
类选择器
作用:通过元素的class属性值,对类选择器进行引用
语法:.类名{}
使用: <div class="类名"></div>
注意:类名不能以数字开头
.div123{}
<div class="div123"></div>
.q1{}
<div calss=”q1”></div>
id选择器
为标有特定id的html元素指定样式
语法:#id值{}
#header{
}
<div id="header"></div>
群组选择器
语法:选择器声明是以 , 隔开的选择器列表
场合:将一些相同的规则用于多个元素时
div,p,#p1,div.top{
color:red;
}
子代选择器
只通过父子级关系定位元素
语法:选择器1>选择器2
#d1>div{}
伪类选择器
特点:匹配元素某种特定的状态
语法: 由 :作为结合符
选择器:伪类选择器{}
CSS伪类可以分为:
1、链接伪类
:link 匹配尚未访问的超链接
:visited 匹配访问过的超链接
2、动态伪类
:hover 匹配鼠标悬停在html元素的状态
:active 匹配元素被激活时的状态
:focus 匹配元素获取焦点时的状态(多数使用在 文本框 上)
溢出处理
属性:
overflow
overflow-x : 横向溢出处理方式
overflow-y : 纵向溢出处理方式
取值:
visible :溢出可见
hidden :溢出隐藏
scroll :出现滚动条
auto :自动不溢出不显示滚动条,溢出的话则显示滚动条
能够修改尺寸属性的元素
1、块级元素
p,div,hn,ul,ol,dl,dt,dd
2、存在width、height属性的html元素
img,table
行内元素:无法修改尺寸
边框
简写方式:border:width style color;
width : 宽度 , 以px为单位
style : 样式 取值: solid 实线
dotted 虚线
dashed 虚线
color : 颜色#rrggbb,...
注意:颜色取值可以为 transparent(透明色)
边框倒角
属性 : border-radius
取值 : 具体数值 或 %
obrder-radius:10px 四边同时变
border-radius:10px 40px 上下 10 左右;40
单独定义:
border-top-left-radius:
border-bottom-right-radius: