期末复习之CSS
文章目录
第四章 CSS
第一节 语法
- CSS全称为层叠样式表(Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
• css代码通常存放在标签内
• css 样式由选择符和声明组成，而声明又由属性和值组成
• 选择符{属性:值}例：p{color:red;}
• 选择符：又称选择器，指明网页中要应用样式规则的元素
• 声明：在英文大括号{}中的的就是声明，属性和值之间用英文冒号:分隔。当有多条声明时，中间用英文分号;分隔，如：
p{
font-size:12px; color:red;
}
第二节 CSS的位置
- 行内样式
- 内联式
- 外联式
行内样式
直接泻在标签的style属性
<div style="width:200px; height:200px"> </div>
内嵌样式
在head中style标签内写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> //写在这 </style> </head> <body> </body> </html>
外联样式
引入独立的css文件；link
<link rel="stylesheet" href="style.css">
第三节 CSS的继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
• 不可继承样式：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
• 可以继承的样式：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor
第五章 CSS选择器
第一节 选择器的种类
- 标签选择器
- 通配符选择器
- 属性选择器
- 后代选择器
- 一级元素选择器
- id选择器
- class选择器
- 伪类选择器
- 群组选择器
标签选择器
标签的名字
div{
width：
height：
}
通配符选择器
选择页面所有元素*
*{
margin:
padding:
}
属性选择器
根据元素的属性及属性值来选择元素
简单属性选择：选择有某个属性的元素，而不论属性值是什么，
*[title] {color:red;}
根据具体属性值选择：选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
a[href="http://www.w3school.com.cn/about_us.asp"] {
color: red;
}
后代选择器
选择某个父元素下面所有的元素
.box p{
background-color:red;
}
一级元素选择器
选择某个父元素的直接子元素
后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会再向下查找元素
.box>p{
background-color:red;
}
id选择器
通过id查找页面中唯一的标签，用 # 标示id
#wrap{
idth:200px;
height:300px;
}
class选择器
以特定的类class来选择对应标签，
.box{
width:200px;
height:300px;
}
<div class="box"></div>
伪类选择器
-
:hover鼠标移入某个元素
.box:hover{ color:red; } -
:before在某个元素的前面插入内容
div:before{ content:"- 台词"; background-color:yellow; color:red; font-weight:bold; } -
:after在某个元素的后面插入内容
div:after{ content:"- 台词"; background-color:yellow; color:red; font-weight:bold; }
群组选择器
对多个不同的选择器设置相同样式
.box,.box1,.box2{
width:200px;
height:300px;
}
第二节 选择器优先级
权重
- 权重计算方式
– 标签选择器：1
– class选择器：10
– id选择器：100
– 行内样式：1000
– !important 最高级别，提高样式权重，拥有最高级别
p{width:200px} /*权重 1*/ 标签
.box{width:200px} /*权重 10*/ 类
.box p{width:200px} /*权重 11*/
#txt{width:200px} /*权重 100*/id
如果两个选择器的权重值一样高，则应用距离对象最近的css样式
第六章 css样式（属性）
第一节 背景 样式
-
背景颜色background-color
background-color: red;//十六进制 rgba
-
背景图片background-image
background-img：(url) 背景图片的大小可以和容器大小不一样 背景图片不会占位 如果容器大，背景图片小，背景图片会平铺 铺满整个容器
-
背景图片位置background-position
background-position:10px 100px；
分别代表xy轴
也可对应的位置left right top center bottom
-
背景图片重复background-repeat
background-repeat：no-repeat round自动缩放 space平铺
-
背景图片定位background-attachment
background-attachment：fixed//是否固定或者随着页面滚动 ：scroll; :fixed
-
background缩写
background:#ff0000 url(bg01.jpg) no-repeat fixed center
第二节 字体样式
-
font-family
字体族：“微软雅黑”
-
font-size
font-size:12px
-
font-weight
font-weight:400; • normal（默认） • bold（加粗） • bolder（相当于<strong>和<b>标签） • lighter （常规） • 100 ~ 900 整百（400=normal，700=bold）
-
color
颜色的英文单词color:red; • 十六进制色：color: #FFFF00; • RGB(红绿蓝)color:rgb(255,255,0) • RGBA（红绿蓝透明度）A是透明度在0~1之间取值。color:rgba(255,255,0,0.5)
-
font-style
font-style:italic • normal 文本正常显示 • italic 文本斜体显示 • oblique 文本倾斜显示
第三节 文本属性
-
行高line-height
line-height：50px;
-
文本水平对齐方式text-align
left center right
-
文本所在行高的垂直对齐方式vertical-align
baseline//默认
sub 垂直对齐文本的下标，和标签一样的效果
super 垂直对齐文本的上标，和标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐 -
文本缩进text-indent
text-indent:2em;
通常用在段落开始位置的首行缩进 -
字母之间的间距letter-spacing
-
单词之间间距word-spacing
-
文本的大小写text-transform
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。 -
文本的装饰text-decoration
none 默认。
underline 下划线。
overline 上划线。
line-through 中线。 -
自动换行word-wrap
word-wrap: break-word;
第四节基本样式
宽 高width height
鼠标样式 cursor
cursor：pointer
default，pointer，move
透明度 opacity
0~1之间的数字，0代表透明，1代表完全不透明
可见性 visibility
visibility:hidden;
visible 元素可见，hidden 不可见，collapse在表格元素使用可删除一行或列，不影响整体布局
溢出隐藏overflow
设置对象内容超过其制定高度及宽度时如何显示内容
visible默认值，内容不会被修剪；hidden 内容修剪不可见
scroll，滚动条查看；auto如果内容被修剪，泽浏览器显示滚动条以便查看
边框颜色 outline
input文本输入自带边框，样式丑陋，使用outline修改
outline：1px solid #ccc
outline：none；清楚边框
第五节 样式 重置
*{ margin:0; padding:0; } /*清除页面所有标签自带的外间距和内填充*/ ul,ol{ list-style:none; } /*去掉自带的列表符*/
a{ text-decoration:none; } /*去掉自带的下划线*/
img,input{ border:none; } /*清除IE下自带的边框*/
第六节 盒模型
元素被分为三种类型
块状元素：div p h ol ul dl
内联元素：a span br em q//quote
行内块状： img input button
-
块级元素：每一个块从新的一行开始，后一个元素令起一行
2 元素的宽高可以设置；3默认值时是本身的100%，除非设定宽度
-
行内元素：1和其他元素都在一行；2宽高边距不能设置，不能改变
-
行内块状元素：1和其他元素都在一行；2框高可以设置改变
元素转换 display
block 将元素转换为块级元素
inline 将元素转换为行级元素
inline-block：将元素转换为内联块
none：隐藏
描边 margin
div{margin： 20px 10px 15px 30px}
元素与之间距离使用margin来设置；
上右下左
内填充 padding
padding： 10px
div{padding：20px 10px 15px 30px}
4:上右下左
3:上 左右 下
2:上下 左右
1:四个方向
第七节 浮动 float
浮动最常用的地方是调整位置
float：left/right；
清除浮动
- clear 清除浮动：
– none : 不清除（默认值）。
– left : 不允许左边有浮动对象
– right : 不允许右边有浮动对象
– both : 不允许两边有浮动对象
第八节 定位 postion
定位功能可以让布局变的更加自由。
绝对定位 position：absolute
利用绝对的数值来定位元素进行调整移动
- position:absolute;
div{
width：200px;
height:200px;
border:2px red solid;
postion:absolute;
left:100px;
top:50px;
//相对于浏览器window向下50px向右100px
}
相对定位 position：relative
相对于原位置的一个定位
• position:relative;
#div{
width：200px;
height:200px;
border:2px red solid;
postion:relative;
left:100px;
top:50px;
//相对于原位置向下50px，向右100px
}
固定定位
相对于网页窗口
position：fixed；
- 前端基础HTML+CSS+JS（期末复习用）
- Web开发期末复习考点
- 做练习中学到的和复习的css内容
- 武汉理工大学-编译原理2019年期末复习提纲
- 计算机网络期末复习（华师）
- 期末复习
- java期末复习---概念题
- 算法分析与设计--学习记录/期末复习
- 微机原理 可编程并行接口期末复习8255A原来可以这么简单！
- 计算机网络期末复习
- web前端css的复习（三十八）Flex简介
- CSS与JavaScript复习笔记
- 人工智能（AI）期末复习
- CSS复习笔记
- CSS复习笔记二：浮动和清除浮动
- CSS基础和布局复习
- JavaWeb总复习——css
- LINUX期末复习---SHELL编程
- HIT软件构造期末复习笔记8
- LINUX期末复习---线程