css
1.层叠样式表,实现页面布局即元素样式的设置
2.使用方式
* 行内样式
借助于style标签属性,书写样式声明
样式代码:
css属性名:属性值;
常用属性:
font-size 设置字体大小,取像素值,默认16px
color 设置文本颜色,取颜色值
background-color 设置背景颜色
例:
<h1 style="color:red;">你好</h1>
* 内嵌样式表
使用<style></style>书写样式代码,实现结构与样式的分离
使用选择器匹配文档中的元素并设置样式
选择器:根据标签名,属性值或层级结构查找对应元素
例:
标签选择器,根据标签名匹配元素
选择器{
属性:值;
}
p{
color:red;
}
* 外链样式表
创建样式表文件(.css),使用选择器匹配元素应用样式
再HTML文件中使用<link>引入样式
3. 样式表特点
* 层叠性
多个样式共同作用于一个元素
* 继承性
子元素可以集成父元素或祖先元素的文本样式
注:超链接的文本颜色需要自行设置
* 优先级
发生样式冲突时考虑优先级,优先级高用谁
优先级划分:
1.行内样式的优先级最高
2.选择器样式优先级一致,发生央视冲突
时,看代码的书写顺序,后来者居上
3.浏览器默认样式和继承样式优先级最低
4. 选择器分类
* 标签选择器
根据标签名匹配元素,应用样式
* id选择器
根据id属性值匹配唯一的元素
#d1{
}
<h1 id = "d1"></h1>
* 类选择器
根据class属性值匹配元素,允许重复使用类名实现样式的复用
.c1{
}
<h1 class="c1"></h1>
特殊:
1.class属性可以设置多个值,使用空格隔开
class="c1 c2 c3"
2.
* 群组选择器
selector1,selector2{
}
为一组元素统一设置样式
* 后代选择器
selector1 selector2{
}
在选择器1中查找所有满足选择器2的后代元素
* 子选择器
selector1>selector2{
}
在选择器1中查找所有满足选择器2的直接子元素
* 伪类选择器
伪类用于表示元素的某种状态,必须和基础选择器结合使用
分类:
1.超链接伪类选择器
:link 访问前
:visited 访问后
2.动态伪类
:hover鼠标滑过(悬停)
:ative鼠标点按(激活)
3.表单控件的状态
:focus输入框的焦点状态
5.选择器的优先级
* 相同类型的选择器发生样式冲突,后来者居上
* 不同类型的选择器发生样式冲突,看权重,权重越高,优先级越高
标签类选择器 1
类/伪类 10
id选择器 100
* 后代选择器,子代选择器的权重有各个选择器的权重累加计算
#box span{} /*100+1*/
#box>h1>.c1{} /*100+1+10*/
* 群组选择器的权重由各个选择器单独计算
h1,#d1,.c1{}
一: 标签分类及嵌套
1.标签分类:
* 块元素
独占一行,不予其他元素共行显示
手动设置宽高,(默认情况下宽度与父元素保持一致)(div,h1~h6,p,ul,ol,li,table,form,body)
* 行内元素
允许共行显示,不能手动调整宽高,尺寸有内容决定(a,b,strong,lable,span)
* 行内块元素
既能共行显示,又能手动设置宽高(input,img,button)
2. 标签嵌套
* 块元素中可以嵌套任意类型的标签
注意: p标签中只能嵌套行内或者行内块元素
* 行内元素中尽量只嵌套行内或行内块元素
二: 尺寸及颜色表示
1. 尺寸单位
px:默认单位,指定像素值
%:百分比,参照父元素对应属性值进行计算
em:相对单位,表示字体大小,参照父元素的字体大小进行计算
默认1em=16px
rem: 参照根元素的字体大小进行计算
2. 颜色表示
* 英文单词
* rgb(r,g,b)使用三原色设置颜色,每种颜色取值0~255,值越大颜色越饱和
* rgba(r,g,b,alpha)使用三元素设置,并且可以设置透明度,alpha取值
0(透明)~1(不透明),取小数设置半透明
特殊值
rgb(0,0,0)黑
rgb(255,255,255)白
* 十六进制表示颜色
十六进制以#为前缀,每两位为一组代表一种三原色,三原色取值0~255,转换十六进制00~ff,
十六进制值中每位字符的取值范围: 0~9,a~f
黑色#000000
白色#ffffff
短十六进制:
由三位组成,代表三原色.浏览器会自动对每一位进行重复,补全成6位十六进制
#000-->#000000
#fff-->#ffffff
#0f0-->#00ff00
三 盒模型(框模型)
1.元素是由各种框组成的(内容框,边框,边距),为元素设置尺寸,边框和边距,
会影响元素再文档中的实际尺寸,影响布局
2.内容框设置
* 大部分元素在设置width/height时,指定的就是内容框的大小
* 内容溢出: 元素的内容超出元素设置的尺寸
可以使用属性overflow处理溢出
overflow:visible(默认值,溢出可见)
hidden(隐藏)
scroll(强制在水平和垂直方向添加滚动条)
auto(自动再发生溢出的方向添加可用的滚动条)
3.边框设置
* 边框设置:
border:width style color;
边框样式(border-style)可取:
solid 实线
dotted 点线
dashed 虚线
double 双线
* 单边框设置
border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框
取值: width style color;
* 网页三角标制作
设置高度为0
统一设置四个方向透明边框
调整某个方向边框可见
特殊:
行内元素拼接三角标时,默认不能手动调宽高,自带高度(有字体大小决定)
可以设置font-size为0,去掉默认高度,或者转换元素类型,转换成元素
/行内块元素设置为0
转换元素类型:
属性display
取值:
block(块元素)
inline(行内元素)
inline-block(行内块元素)
none(元素隐藏)
7 内边距设置
设置内容框与边框之间的距离
属性: padding
取值:像素值
取值规律:
50px 统一设置四个方向的内边距
50px 20px 分别设置上下 左右的内边距
10px 20px 50px 分别设置上 右 下,缺省方向与右侧内边距保持一致
10px 20px 30px 50px 分别设置上 右 下 左四个方向的内边距
单方向内边距设置:
padding-top
padding-right
padding-bottom
padding-left
取消默认的内边距
ul,ol{
padding:0;}
8 外边距设置
设置元素与元素之间的距离
属性:margin
取值:像素值,取值规律同padding
特殊取值:
* 设置左右自动外边距,实现元素再父元素范围内的水平居中
* 取负值,元素位置的微调
单方向外边距设置
margin-top
margin-bottom
margin-left
margin-right
外边距合并:
1. 垂直方向
* 第一个子元素设置的margin-top,作用于父元素上
可以为父元素设置顶部边框或者添加padding-top:0.1px
* 同时为元素设置上下边距,元素之间最终选用最大的边距值
2. 水平方向
* 行内元素对盒模型属性部分支持
不支持宽高设置,不支持上下边距
* 水平方向上外边距会叠加显示
具有默认外边距的元素:
body,h1~h6, p, ul, ol{
margin:0;
padding:0;
list-style:none;(去掉项目符号)}
4.轮廓线
轮廓线在文档中不占位,边框是实际占位的
outline:width style color;
常用:
outline:none;/*取消文本框焦点状态下的轮廓线*/
5.边框圆角
属性: birder-radius设置圆角半径
取值: 像素值/百分比
使用:
常用像素值设置四个圆角的效果
常用50%设置元素的显示形状(正圆或椭圆)
6.盒阴影
属性:box-shadow
取值:offsetX offsetY blur (spread) color;
网页坐标系:一律以左上角为原点,向右,向下分别为x轴和y轴的正方向
属性值:
offsetX/offsetY:设置阴影的偏移距离
blur: 设置阴影的模糊程度,取像素值,越大越模糊
spread: 选填设置阴影的延伸距离
color:设置阴影颜色,默认为黑色
9.元素在文档中实际尺寸的计算
属性:box-sizing
取值:
content-box
为元素设置的width/height指定的是内容框的大小
计算尺寸:各个属性值累加计算
width/height+border+padding+margin
border-box
为元素设置的width/height指定的是包含边框在内区域的大小
计算尺寸:width/height+margin
一: 布局方式
1. 静态流/文档流布局
根据元素类型和代码书写顺序,从上到下,从左到右依次显示
2. 浮动布局
属性:float
取值:left/right
特点:
* 浮动元素会从它在文档中的原始位置脱离文档流,"悬浮"在父元素上方,
按照浮动方向依次停靠在前一个元素的边缘
* 浮动元素脱流之后,在文档中不占位,可以手动设置宽高
* "文字"环绕效果:浮动元素会遮挡正常元素的位置,但是不影响内容显示
,正常内容会围绕在浮动元素周围显示
问题几解决:
* 浮动元素u不占位,后面正常的元素会向前占位
解决:清除浮动
属性:clear
取值:left/right/both
使用:添加在正常元素上,使其不受前面浮动元素的影响
* 子元素全部浮动,造成父元素高度为0,影响父元素自身背景或边框样式的
显示,影响整体布局
解决方式一:
给父元素固定高度(适用于内容确定的元素.例如:导航栏)
解决方式二:
可以给父元素设置overflow:hidden;(适用于内容不确定,需要
动态加载的元素.例如:页面主体)
解决方式三:
父元素末尾添加空的块元素,设置clear:both;
3. 定位布局
* 定位用于实现元素显示位置的调整
属性:position
取值:relative/absolute/fixed
使用:元素设置position属性之后,才能成为已定位的元素,已定位的元素
可以结合偏移属性调整显示位置
偏移属性:
top 设置距离参照物顶部的偏移量
left
bottom
right
分类:
* 相对定位(relative)
设置相对定位的元素会参照它在文档中的原始位置偏移,不会脱离文档流
* 绝对定位(absolute)
设置绝对定位的而元素会参照离它最近的已定位的祖先元素进行偏移,没
有的话最终参照窗口的(0,0)点偏移,会脱离文档流(不占位,可以手动调宽高)
使用:父元素设置相对定位,子元素设置绝对定位
* 固定定位
设置固定定位的元素会参照浏览器窗口进行偏移,不会跟随页面滚动而滚动.
会脱离文档流,常见于聊天窗口,博客目录或者广告
堆叠次序
* 已定位元素与文档中正常元素发生堆叠,已定位元素再上方显示
* 同为已定位元素发生堆叠,看标签的书写顺序,后来者居上
* 可以使用在z-index属性调整已定位元素的堆叠次序,取无单位的数值,值越大,越靠上
二 背景属性
1.设置背景颜色
background-color
2.背景图片相关
* background-img:url("路径")
设置背景图片
* background-repeat
设置背景图片的重负方式
默认: 元素尺寸>背景图尺寸时,浏览器会自动重复平铺,直至铺满元素
元素尺寸< 背景图尺寸时,背景图默认从元素的左上角显示,超出部分不可见
调整背景图的重复方式:
repeat默认值,沿水平和垂直两方向重复平铺
repeat-x
repeat-y
no-repeat
* background-position:x y;
设置背景图片的显示位置
取值方式:
1.取像素值,再元素坐标系中设置背景图片的起始坐标
2.取方位值
水平:left/center/right
垂直:top/center/bottom
默认缺省方向值为center
3.百分比
x% y%计算背景图片的起始坐标:
(元素尺寸-图片尺寸)*x%
特殊值:
0% 0%-->left top
50% 50%-->center
100% 100%-->right bottom
* background-size:width height
设置背景图片的尺寸
取像素值,百分比或关键字:
1.像素值,直接指定宽高,只给一个值表示设置宽,高度会等比例缩放
2.百分比,根据元素尺寸计算背景图片的尺寸
3.关键字:
cover覆盖;背景图片等比拉伸至足够大完全覆盖元素,超出部分不可见
contain包含;等比拉伸值刚好被元素容纳
* 简写属性
background:color url() repeat position;
背景图片的尺寸,background-size需要单独设置
CSS文本属性
1. 字体相关
* font-size
* font-weight:设置字体粗细程度,取bold/normal;
或者取整百数值表示粗细程度100~900
400等价于normal,700等价于bold
* font-style:设置斜体,取italic
* font-family:设置字体名称,如果说字体名称为中文或者出现空格
必须使用引号,可以取多个值设置备用字体,属性值之间使用逗号隔开
* 简写属性:
font:style weight size family
注意:简写属性中,size和family是必填项
2. 文本相关
* color
* text-decoration:设置装饰线,可取:
underline 下划线
overline 上划线
line-through 删除线
none 取消装饰线
注意: 装饰线是紧贴文本显示,颜色与文本色一致
* text-align:设置文本的水平方式对齐,默认居左
left/center/right/justify(两端对齐)
line-height: 设置行高;文本在当前行中一定是垂直居中.
可以和值行高根元素高度保持一致,实现一行文本在元素中的垂直居中效果
可以取像素值或无单位的数值(表示字体大小的倍数,以此计算行高)
扫一扫
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
