CSS基础知识
2018-06-29 10:51:19 0 举报AI智能生成
CSS的基础知识点
作者其他创作
大纲/内容
CSS引入方式
1.行内式
行内式结构
2.嵌入式
嵌入式结构
优缺点
优点: 引入数目没有限制
缺点: 只能应用于本页面，不能应用于其他页面
3.链接式(推荐使用)
<link rel="stylesheet" href="index.css">
4.导入式
<style>
@import "test_css.css"
</style>
@import "test_css.css"
</style>
CSS选择器
一、基础选择器
标签选择器
class选择器
id选择器
通配选择器
二、组合选择器
多元素选择器
E,F
子代选择器
E>F
后代选择器
E F
毗邻选择器
E+F
兄弟选择器
E~F
三、属性选择器
E[attr]
E[att=val]
E[att~=val]
E[att^=val]
E[att$=val]
E[att*=val]
四、伪类选择器
anchor伪类
a:link
a:hover
a:visited
a:active
before after伪类选择器
E:before
E:after
选择器优先级
css的继承
css的优先级(重点)
标签:1
class:10
id:100
style:1000
!important
总结
CSS属性操作
文本属性:text
文本颜色:color
16进制值
RGB(0-255,0-255,0-255,0-1)
opacity:透明度
水平对齐方式:text-align
left:左对齐，默认左对齐
right:右对齐
center:居中对齐
justify:两端对齐
垂直对齐方式:vertical-align
baseline:默认。元素放置在父元素的基线上。
sub:垂直对齐文本的下标。
super:垂直对齐文本的上标
top:把元素的顶端与行中最高元素的顶端对齐
text-top:把元素的顶端与父元素字体的顶端对齐
middle: 把此元素放置在父元素的中部。
bottom:把元素的顶端与行中最低的元素的顶端对齐。
text-bottom:把元素的底端与父元素字体的底端对齐。
%:使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit:规定应该从父元素继承 vertical-align 属性的值。
文本行高:line-height
文本下划线:text-decoration
none:默认。定义标准的文本
underline:定义文本下的一条线。
overline:定义文本上的一条线。
line-through:定义穿过文本下的一条线。
blink:定义闪烁的文本。
inherit:规定应该从父元素继承 text-decoration 属性的值。
字体样式:font-family
字体加粗:font-weight
normal:默认值。定义标准的字符。
bold:定义粗体字符。
bolder:定义更粗的字符。
lighter:定义更细的字符。
inherit:规定应该从父类元素继承font-weight属性的值
字体倾斜:font-style
normal:默认值。浏览器显示一个标准的字体样式。
italic/oblique:字体倾斜的样式
inherit:规定应该从父元素继承字体样式。
文本缩进:text-indent
字母间距:letter-spacing
单词间距:word-spacing
文本转换:text-transform
none:默认。定义带有小写字母和大写字母的标准的文本。
capitalize:文本中的每个单词以大写字母开头。
uppercase:定义仅有大写字母。
lowercase:定义无大写字母，仅有小写字母。
inherit:规定应该从父元素继承 text-transform 属性的值。
背景属性:background
background-image
url('URL') :指向图像的路径。
background-color
background-repeat:规定如何重复背景图像。
repeat: 默认。背景图像将在垂直方向和水平方向重复。
repeat-x:背景图像将在水平方向重复。
repeat-y:背景图像将在垂直方向重复。
no-repeat:背景图像将仅显示一次。
inherit
background-position:设置背景图像的起始位置。
top left
x% y%
xpos ypos
background-size:属性规定背景图像的尺寸
length
percentage
cover
contain
简写:background:#ffffff url('1.png') no-repeat right top;
列表属性:list-style
list-style-type:设置列表项标记的类型。
none
circle:空心圆
disc:实心圆
square:实心方块
decimal:标记的是数字
lower-roman:小罗马数字
upper-roman:大罗马数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母
list-style-position:设置在何处放置列表项标记
inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-image:使用图像来替换列表项的标记
URL:图像的路径
none:默认。无图形被显示。
显示属性:display
block:此元素将显示为块级元素
inline:默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block:行内块元素。
list-item:此元素会作为列表显示。
table:此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table:此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
none:隐藏该元素，不显示
盒模型
边框属性:border
border-width
border-style
border-color
简写: border:5px solid red;
外边距:margin
margin:10px
margin:10px 20px
margin:10px 20px 30px
margin:10px 20px 30px 40px
margin:0 auto;
填充:padding
思考
思考问题1
思考问题2
浮动属性:float
浮动问题
浮动规则
元素分类
block元素
inline元素
inline-block元素
文档流
浮动规则
定位属性:position
static
relative
absolute
fixed
总结
脱离文档流的操作
float
position:fixed/absolute;
区别
居中总结1
margin:auto;
text-align:center
使用line-height让单行的文字垂直居中
使用表格
使用display:table-cell来居中
使用绝对定位来进行居中
另一种使用绝对定位来居中的方法
使用浮动配合相对定位来进行水平居中
利用font-size来实现垂直居中
居中总结2
水平居中
行内元素
定宽块级元素
不定宽块级元素
1.加入 table 标签
2.设置 display:inline 方法
3.设置 position:relative 和 left:50%
注意
垂直居中
父元素高度确定的行内元素（单行文本）
高度固定的块级元素垂直居中
1.垂直居中元素设置 absolute，利用 absolute 元素居中的方法来居中
2.垂直居中元素设置 absolute，通过 top 和 margin-top 属性来调整；
3.创建浮动元素；
父元素高度确定的行内元素（多行文本、图片）、块状元素
1.加入table标签；
2.设置 display 为 table-cell，激活 vertical-align 属性。
注意
1、默认的高度和宽度问题
（1）父子都是块级元素
（2）父：块级元素 子：内联元素
0 条评论
下一页
