CSS:Cascading Style Sheets -层叠 样式表
HTML:搭建网页结构
CSS:在网页结构基础上增加样式效果
css 就是给 html 定义外观 ,html是毛坯房css 就是装修
如果CSS的内容与HTML属性相冲突的话:优先使用CSS
2、CSS的使用方式(重点)
1、内联方式
将CSS的内容定义在单独的HTML元素中
语法:
<ANY style="样式声明">
样式声明:
1、样式声明由样式属性名称 和 样式属性值来组成的
2、属性名称 和 值 之间使用 : 连接
属性名:值
3、在一个style中允许有多个样式声明,多个样式声明之间使用 ; 来分割
<ANY style="属性1:值1;属性2:值2;">
常用属性 和 值:
1、文字大小
属性:font-size
取值:以 px 为单位的数字
ex:
<ANY style="font-size:16px">
2、文本颜色
属性:color
取值:表示颜色的英文单词
3、背景颜色
属性:background-color
取值:表示颜色的英文单词
2、内部样式表
1、作用
让定义好的样式能够适应当前页面中的多个元素
2、语法
<head>
<style>
样式规则1
样式规则2
... ...
样式规则n
</style>
</head>
样式规则语法:
由选择器 和 样式声明组成
选择器:规范了页面中哪些元素能够使用声明好的样式们
选择器{
属性1:值1;
属性2:值2;
... ...
}
ex:
div{
... ...
}
p{
... ...
}
h1{
... ...
}
3、外部样式表
1、作用
将声明好的样式应用在多个网页中
将样式规则声明在独立的css文件中(***.css)
在使用的网页上对 .css 文件进行引用
2、使用步骤
1、创建 .css 文件,并编写样式规则
2、引用 .css 文件
<head>
<link rel="stylesheet" href="css文件的url">
</head>
3、样式表的特征
1、继承性
大部分的css属性可以由父元素继承给子元素的
2、层叠性
允许为一个元素定义多种使用方式(内联,内部样式表,外部样式表)或多个样式规则,如果属性不冲突的话,那么所有的属性都可以应用到元素上
3、优先级
如果样式属性声明冲突的话,则按照不同的优先级来应用样式
浏览器缺省设置 : 低
内部或外部样式表 : 中
就近原则:后定义者优先
内联方式 : 高
1、样式表的使用方式
1、内联方式
<ANY style="样式属性:值;属性:值;">
2、内部样式表
<head>
<style>
样式规则
选择器{
样式声明;
样式声明;
}
</style>
</head>
3、外部样式表
1、将样式声明在独立的css文件中(.css)
结构与内部样式表一致
2、在使用的网页中引入 .css 文件
<link rel="stylesheet" href="css文件的url">
font-size:字体大小
color:文本颜色
background-color:背景颜色
===============================================
1、CSS选择器(重点)
1、选择器作用
规范了页面中哪些元素能够使用声明好的样式
目的:为了匹配页面中的元素
2、选择器详解
1、元素选择器
特点:由标记的名称来作为选择器,主要匹配页面中指定标记所对应的所有元素
语法:
标记{
样式声明;
}
ex:
p{ ... }
div{ ... }
h3{ ... }
... ...
2、类选择器
特点:允许被任意一个元素所引用的选择器
语法:
.类名{ ... }
类名:
1、字母,数字,_,- 组成
2、数字不能开头
引用类选择器:
<ANY class="类名"> (此处不加 .)
练习:
1、创建一个01-selector-class.html文件
2、页面中创建几个元素(div,span,h3,p)
3、使用类选择器,设置以上所有标记的样式
1、文字大小:18px
2、文本颜色:黄色
3、背景颜色:红色
特殊用法:
1、分类选择器
允许将元素选择器和类选择器结合到一起使用,为了实现对某种元素不同样式的细分控制
语法:
元素选择器.类选择器{ ... }
ex:
.important{
类选择器,匹配页面中所有class为important的元素
}
div{
元素选择器,匹配页面中所有的 div
}
div.important{
分类选择器,匹配页面中所有class为important的div元素
}
练习:
在刚才的练习基础上
设置页面中所有的 class为bigFont的div标记,加粗效果(font-weight:bold;)
2、多类选择器
允许一个元素引用多个类选择器,类选择器的名称用 空格 隔开即可
<ANY class="c1 c2 c3">
练习:
增加一个类选择器
.dec{
text-decoration:underline;
}
让页面中所有的元素增加对 dec 类选择器的引用
3、id选择器
在HTML中,每个元素都允许设置一个 id 属性,用来表示元素在页面中独一无二的标识
ID选择器作用:
为了匹配页面中指定ID值的元素
语法:#ID值{ ... }
ex:
#main{
/*匹配页面中id为main的元素的样式*/
}
4、群组选择器
1、作用
定义多个选择器们共有的样式
定义方式是一个以 , 隔开的选择器列表
2、语法
选择器1,选择器2,选择器3,...{
... ...
}
ex:
#main,span,p.important{
color:red;
}
等价于
#main{color:red;}
span{color:red;}
p.important{color:red;}
5、后代选择器
1、作用
依托于元素的后代关系来匹配某元素的后代元素(不限制层级)
2、语法
选择器1 选择器2{ ... }
ex:
1、div span{
匹配所有div 中的 所有的 span
}
2、#top .important{
匹配 id为top的元素中 class 为important 的所有后代
}
6、子代选择器
作用:依托于元素的子代关系(只有一层层级)来匹配元素
语法:选择器1>选择器2{ ... }
ex:
#top>.important{
匹配 id为top元素中直接子级class为important的元素
}
7、伪类选择器
1、作用
为了匹配元素的不同的状态的
2、语法
:伪类状态
通常会配合其他的选择器一起使用
元素选择器:伪类{}
#ID:伪类{}
... ...
1、链接伪类
1、:link
匹配超链接未被访问时的状态
2、:visited
匹配超链接被访问过的状态
2、动态伪类
1、:hover
匹配鼠标悬停在元素上时候的状态
2、:active
匹配元素被激活时的状态
3、:focus
匹配元素获取焦点时的状态
2、尺寸 与 边框
1、CSS单位
1、尺寸单位
2、颜色单位
1、rgb(r,g,b)
r : 红色范围值 0-255
g : 绿色范围值 0-255
b : 蓝色范围值 0-255
ex:
rgb(255,0,0) : 红色
rgb(0,255,0) : 绿色
rgb(255,255,255) : 白色
rgb(0,0,0) : 黑色
rgb(128,69,32) : ??
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha)
alpha : 透明度 0-1之间的数字(小数)
0 :完全透明
1 :完全不透明
4、#rrggbb
由6位16进制的数字组成(0-9,A-F)
ex:
#ff0000 : 红色
#1a2b3c : ??
5、#rgb
#rrggbb的简写方式,当#rrggbb每两位数字相同时,可以使用 简写版
#112233 -> #123
#ff00aa -> #f0a
#f100aa -> 无简写方式
2、尺寸属性
1、作用
改变元素的宽度和高度
2、属性
width : 宽度,以px 或 % 为单位
ex:
width:500px;
width:0; width:0px;
height: 高度,以px 或 % 为单位
块级元素默认尺寸:
宽度:占父元素的100%
高度:以内容为准
行内元素默认尺寸:
宽度:以内容为准
高度:以内容为准
3、允许修改尺寸的元素
1、所有的块级元素都允许修改尺寸
2、行内块元素(表单控件)允许修改尺寸
3、table允许修改尺寸
4、除img以外的行内元素们,都不允许修改尺寸
4、溢出处理
1、什么是溢出
当使用尺寸属性限制元素尺寸时,如果内容所需空间大于元素尺寸时,将产生溢出的效果
2、溢出处理
属性:overflow
取值:
1、visible
默认值,可见的
2、hidden
溢出隐藏
3、scroll
显示滚动条,溢出时可用
4、auto
自动,溢出的方向产生滚动条
3、边框属性
1、边框的实现
1、简写方式
通过1个属性设置4个方向边框的所有效果(宽度,样式,颜色)
属性:border
取值:width style color
width:边框宽度,以px为单位
style:边框的样式
solid : 实线
dotted: 虚线(点)
dashed: 虚线(线)
color:颜色 或 transparent(透明)
特殊:
border:none; 取消所有边框的显示效果
2、单边定义
设置某一条边的宽度,样式,颜色
语法:
border-方向:width style color;
方向:top / bottom / left / right
ex:
1、上边框:1px宽度,实线,黑色
2、左边框:2px宽度,虚线,红色
3、单属性定义
设置四个方向边框的某一个属性值
属性:border-属性:值;
属性:width / style / color
ex:
1、设置四个方向的边框尺寸为5px
2、设置四个方向的边框颜色为蓝色
4、单边单属性设置
设置某一个方向的边框的某一个属性值
属性:border-方向-属性:值;
ex:
1、右边框的样式为 虚线(线)
2、下边框的颜色为 绿色
2、轮廓
outline:none; 取消轮廓
3、边框倒角
将四个直角变为圆角
属性:border-radius
取值:
1、以px为单位的数值
2、以%为单位的数值 - 50%
练习:
1、创建09-border-radius-exercise.html
2、创建一个div,尺寸 200*200,边框 ...
3、鼠标悬停时
1、将元素变为圆形的
2、背景颜色改为红色
3、框模型
1、什么是框模型
框:页面中所有元素皆为框
框模型:定义了元素的尺寸和距离的一种计算方式
Box Model,也称为 盒模型,方框属性
包含 :尺寸属性,边框属性,内边距属性,外边距属性
当框模型的属性介入到元素中的时候,那么元素的整体占地尺寸会发生变化
元素的实际宽度=左右外边距 + 左右边框 + 左右内边距 + width
元素的实际高度=上下外边距 + 上下边框 + 上下内边距 + height
2、外边距
1、什么是外边距
围绕在元素边缘之外的空白空间就是外边距
2、语法
1、属性
1、margin
最多控制4个方向的外边距值
2、margin-top
上外边距
3、margin-right
右外边距
4、margin-bottom
下外边距
5、margin-left
左外边距
2、取值
1、以 px 为单位的数值
2、以 % 为单位的数字
左右外边距占父元素宽度的占比数
上下外边距占父元素高度的占比数
3、取值为 负数
移动元素
为元素设置上外边距为正数,元素向下移动
为元素设置上外边距为负数,元素向上移动
为元素设置左外边距为正数,元素向右移动
为元素设置左外边距为负数,元素向左移动
4、auto
自动
注意:
1、只能用在左右外边距,上下无效
2、只能为设定宽度的块级元素设置左右外边距为auto - 让块级元素水平居中显示
3、margin间接写法
1、margin:value
value表示的是上下左右四个方向的外边距值
2、margin:v1 v2;
v1 : 上下外边距的值
v2 : 左右外边距的值
ex:
margin:0 auto;
3、margin:v1 v2 v3;
v1 : 上外边距
v2 : 左右外边距
v3 : 下外边距
ex:
margin:10px auto 5px;
4、margin:v1 v2 v3 v4;
v1 : 上外边距
v2 : 右外边距
v3 : 下外边距
v4 : 左外边距
3、页面中具备默认外边距的元素
body,p,h1~h6,ol,ul
将所有具备外边距的元素们的外边距都设置为0
body,p,h1,h2,h3,h4,h5,h6,ol,ul{
margin:0;
}
3、内边距
1、什么是内边距
内容与元素边框之间的距离
注意:内边距会扩大元素边框的所占区域
2、语法
属性:
padding :4个方向的内边距
padding-top / right / bottom / left:值;
取值:
1、以px为单位的数值
2、以% 为单位的数值
简洁写法:同margin
padding:value; 四个方向内边距
padding:v1 v2; 上下 左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上 右 下 左
3、页面中具备默认内边距的元素
1、ol,ul :左内边距 40px
2、文本框,密码框
<div id="main">
<p>
<span>这是 p1中的 s1</span>
</p>
<span> 这是 main 中的 s2 </span>
</div>
1、页面中#main中的所有的span,文本变为红色,文字大小 24px
2、页面中 #main 直接子级的span 增加下划线
3、#main中,p中的span 设置为加粗的效果