初学HTML 04

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、存在widthheight属性的html元素
imgtable

行内元素:无法修改尺寸

边框

简写方式:border:width style color;

width : 宽度 , 以px为单位
style : 样式   取值: solid 实线
                      dotted 虚线
                       dashed 虚线

color : 颜色#rrggbb,...

注意:颜色取值可以为 transparent(透明色)

猜你喜欢

转载自www.cnblogs.com/nnnnmmmm/p/10407480.html