css基础
1、css基础
css:全称（Cascading Style Sheets） 层叠样式表；也称样式表；
作用：css用来修饰结构 （html标签）的；让结构显示的更美观；
以前布局使用的是表格，缺点，修改不够灵活，因为结构和表现写在一起，耦合度高
后来用html+css布局（div+css）
html和css实现了结构和表现相分离；耦合度低。；
2、css语法
css语法：
选择器{
属性：属性值；
属性：属性值1 属性值2；
}
语法说明：
1、css是由两部分组成的，选择器和声明
选择器：是要定义样式的对象；
说明：包含属性和属性值；要将对象定义成什么样子；
属性：指的是标签所具有的属性，已经规定好直接使用就行；
属性值：指的是属性所具有的值，有以下几种形式：
-> 数值加单位 如：100px 50% em rem
-> 法定属性值 如：font-weigth:bold;已经规定好的属性值，直接用；
-> 颜色值：十六进制, rgb(), rgba(), hsl()
2、声明要写在大括号里面
3、声明和声明之间用分号隔开,一个声明写完之后也要用分号结束；
4、属性和属性值之间用冒号（:）连接；
5、当一个属性有多个属性值时，属性值和属性值之间用空格分开；
3、css样式表
3-1、内联样式表（行内样式表）
<div style="width: 20px; background-color: black;"></div>
3-2、内部样式表（内嵌样式）
<style type="text/css">
选择器{
属性:属性值;
}
</style>
注：最好将style写在<head></head>里
3-3、外部样式
<link rel="stylesheet" typle="text/css" href="../css/style.css">
说明：使用link元素导入外部样式表时，需将该元素写在文档头部即<head></head>里
rel:(relationo 关系)用于定义文档关联，表示关联样式表；
type:定义文档类型；
4、css三大特性
4-1、css优先级
1)内联样式的优先级最高
2）内部样式和外部样式的优先级和书写顺序有关，后书写的优先级高。
3）同一样式表中的优先级和书写顺序也有关，后书写的样式覆盖前面的样式
4-2、css层叠性
层叠是指覆盖
样式冲突，遵循的是就近原则，哪个样式离结构近就应用哪个样式。
样式不冲突，不会层叠；
4-3、css继承性
给父元素添加的样式，子元素也可以继承
5、css选择器
5-1、元素选择符
-> 元素选择符就是以文档对象html中的标签作为选择符，即使用结构中元素名称作为选择符。例如：body、div、span等；
->页面上所有元素都可以作为选择符；
5-2、ID选择符
语法：
#id名{
属性:属性值;
}
1)可以给每个元素使用id选择器，但id是元素的唯一标识符，不可重复出现id名；
2）最大的用处：创建网页的外围结构（唯一性，起名字时不能使用关键字）
5-3、类（class）选择符
语法： .class名{属性:属性值;}
用法：class选择符更适合定义一类样式；
5-4、群组选择器
语法：选择符1,·····选择符5{属性:属性值;}
说明：当有多个选择符应用相同的样式时，可以将选择符用“,”的方式，合并为一组。
例：.top,nav,p{width:50px}
5-5、关系选择器
| 选择符 | 名称 | 描述 |
|---|---|---|
| E F | 包含选择符 | 选择E包含的所有F元素（子孙） |
| E>F | 子选择符 | 选择E包含的所有F子元素（儿子） |
| E+F | 相邻选择符 | 选择紧贴E之后的F元素（兄弟） |
| E~F | 兄弟选择符 | 选择E之后的所有F兄弟元素（兄弟） |
5-6、通配符
语法：
*{属性:属性值;}
说明：
通配选择符其含义就是所有标签；标识改样式适合网页所有的元素；
用法：常用来重置样式，设置全局效果
5-7、动态伪类选择符
| 选择符 | 描述 |
|---|---|
| :link | 未访问时的链接状态 |
| :visited | 已访问时的链接状态 |
| :hover | 鼠标停留时的链接状态 |
| :active | 鼠标点击时的链接状 |
说明：
1）当这4个超链接伪类元素符联合使用时，应注意他们的顺序，正常顺序为：a a:link a:visited a:hover a:active;（love hate 情仇）错误的顺序有时会使超链接的样式失效。
2）为了简化代码，可以把伪类选择符中相同的声明提前放在a选择符中；
例如：a{color:red;} a:hover{color:green;}
表示超链接的三种方式状态都相同，只有鼠标划过变化颜色
6、选择符权重
css中用4位数表示权重
权重的表达方式如：0，0，0，0；
权重规则：HTML标签（类型选择符）的权重是1，class的权重是10，id的权重是100。
！important（优先级最高）
1）内联样式的权重为1000;
2）id选择符的权重为0100；
3）类/属性/伪类/伪元素选择符的权重为0010；
4）类型（标签）选择器的权重是0001；
5）继承样式/通配符的权重为0000；
包含选择符的权重为包含选择符的权重之和；
群组集合的选择符权重为他本身
注：如果权重相同时，则执行后写的样式；
css属性
1、文本属性
1-1、字体
1-1-1、字体倾斜
font-style: normal | italic | oblique；
属性值：
normal 常规显示
italic 倾斜度小
oblique；倾斜度大
说明：italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.
1-1-2 、小型大写字母
font-variant：normal | small-caps
属性值：
normal 正常显示
small-caps 小型大写字母
1-1-3 、字体加粗
font-weight: normal | bold | bolder | lighter 【定义文本的粗细】
属性值：
normal 正常效果
bold 加粗效果
bolder 更粗的
lighter 更细的
100~900
说明：
在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，
100-300极细字体 400-500常规字体 600-700加粗字体 800-900更粗的 400=normal 700=bold
1-1-4、字体大小
font-size：20px | 10em | 20rem | 20% 【定义文字大小】
说明：
1） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。
2）单位还可以是pt，9pt=12px;
3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px;
补充：px是像素单位，em， rem是相对单位，pt是绝对单位
1-1-5、字体类型
font-family： 属性值为字体样式名，多个字体中间以逗号隔开 【定义字体样式】
简写属性：font:fon font-size,font-family,font-weight,font-variant,font-style
注：fon font-size,font-family这俩个属性值必须有
1-2、颜色
color 【定义颜色】
opacity 【定义透明度】
1-3、文本
1-3-1、单词大小写
text-transform:
capitalize 【每个单词的首字母大写】
lowercase 【单词小写】
uppercase 【单词大写】
none 【正常】
1-3-2 文本是否保留空格，换行以及超出边界换行
white-space:
说明：
normal 正常显示多余的空格会保留一个
nowrap 和normal一样，不同的是会将文本强制显示在一行
pre 原封不动的保留输入时文本的格式
pre-line 和nomal一样不同的是会保留文本换行
pre-wrap 与pre相同，，不同的是超出边界自动换行
1-3-5定义文本的对齐方式
text-align:
说明：
start 开始
end 末尾对齐
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐（但最后一行不做对齐）
justify-all 两边对齐最后哦一行也对齐
定义文本换行
1-3-6 定义文本最后一行对齐的样式
text-align-last
说明：
auto 无特殊对齐方式
start 开始
end 末尾对齐
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐（但最后一行不做对齐）
1-3-7定义单词之间的间隙
word-spacing:
说明：
normal 正常显示
lenght 长度
1-3-8 定义字符之间的间距
letter-spacing:
说明：
normal 正常显示
lenght 长度
定义文本最后一行对齐的样式，属性值和text-align一样；
1-3-9首 行缩进
text-indent
说明：
length 长度
1-3-10垂直对齐（可以设置让元素以自身的哪一个位置对齐）
vertical-align:
baseline 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中
1-3-11文字行高
line-height:normal/value;
说明：
当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上；
当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下；
（注，行高大于高度，不会对文本结构和内容有影响，插入图片除外）
（IE6及以下版本存在浏览器兼容问题）
*文字属性简写：font:12px/24px "宋体";
font属性的简写：字号，行高，字体
font-size:12px; line-height:24px; font-family:”宋体”；
font属性的简写：
说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
顺序: font-style font-weight font-size / line-height font-family
注意：
(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。
(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 他们会使用缺省值（默认值）。
1-4 、文本修饰
text-decoration:
说明：
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
补充：text-decoration其实是一个简写的属性。
text-decoration-line：上划线 下划线 删除线
text-decoration-color：颜色
text-decoration-style：实线solid 虚线dashed 点线dotted
1-5、书写模式
direction:
说明：
ltr从左到右
trl从右到左
2、列表属性
2-1、定义项目符号样式
list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
2-2、定义列表符号位置
list-style-position:outside(外边)/inside(里边)；
*list-style:none;去掉列表符号*
2-3、使用图片作为列表符号
list-style-image：url(所使用图片的路径及全称)；
说明：
基本不用
3、边框属性
border:边框宽度 边框风格 边框颜色;
例如：border:5px solid #ff0000
边框：border,网页中很多修饰性线条都是由边框来实现的。
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)/none可单独设置一方向边框，
可单独设置一方向边框，
border-bottom:边框宽度 边框风格 边框颜色;底边框
border-left:边框宽度 边框风格 边框颜色;左边框
border-right:边框宽度 边框风格 边框颜色;右边框
border-top:边框宽度 边框风格 边框颜色;上边框
4、背景属性
4-1背景颜色
background-color:颜色值；
4-2背景图片的设置
background-image:url(背景图片的路径)
背景图片的显示原则：
-> 容器的尺寸等于图片的尺寸，背景图正好显示在容器中
-> 容器的尺寸大于图片的尺寸，背景图默认平铺甚至铺满整个元素
-> 容器的尺寸小于图片的尺寸，背景图只显示元素范围以内的背景图。
说明：
网页上的图片有两种形式，一种是插入图片，一种是背景图
插入图片的方式是结构，背景图的方式属于网页上的表现，它上面可以插入图片，表格，显示文字等
4-3背景图片平铺属性
background-repeat:
说明：
no-repeat 不平铺
repeat 平铺（默认平铺）
repeat-x 沿x轴平铺
repaet-y 沿y轴平埔
4-4背景图的位置
background-position:
说明：
水平方向：
left 靠左
right 靠右
center 居中
number 数值
垂直方向：
top 顶部
center 居中
bottom 底部
number 数值
background-position为简写形式，包含：
background-position-x:;
background-position-y:;
4-5背景图片的固定
background-attachment:
说明：
fixed 背景图相对于窗口固定，不会随元素滚动
scroll 背景图相对于元素固定，也就是说当元素内容滚动时背景图不会跟随滚动
local: 背景图跟随元素一起滚动
4-6 背景属性的缩写语法
background:属性值1 属性值2 属性值3；
background:url（背景图片的路径及全称） no-repeat center top #f00；
视觉差效果页面 https://divups.com/
网页上常用的图片格式（压缩图片）
1）jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )如果网页中
2）gif：无损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
3）png:无损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;
css属性继承
不可继承的：display、margin、border、padding、background、height、min-height、max-height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform。
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse、border-spacing
元素类型
根据css显示分类，xhtml元素被分为三种类型：
块状元素、内联元素、可变元素
&&
块状元素、内联元素、内联块元素（css2.1增加）
1块状元素的特点
1) 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
2） 默认情况下，块状元素都会占据一行，通俗的说，两个相邻块元素默认情况下不会出现在同一行，会自上而下依次排列
3） 块状元素都可以定义自己的宽度和高度
4） 块状元素一般都作为其它元素的容器，它可以容纳其它内联元素和其它块元素。
2内联元素的特点
1) 内联元素的表现形式是始终以行内逐个显示；
2） 内联元素没有自己的形状，不能定义它的宽高，它显示的宽度和高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元格也会呈现举行形状；
3） 内联元素也会遵循盒模型基本规则，如可以定义：
padding,border,margin,background等属性，但个别属性不能正确显示，（padding-top:;margin-top/bottom:;）
3可变元素（了解）
需要根据上下文关系确定该元素是块元素或者内联元素。
4常见的块元素
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表格列分组元素
table-tr 表格及行-单元格
·······
5常见的内联元素
a –超链接（锚点）
b - 粗体(不推荐)
br - 换行
i - 斜体
em - 强调
img - 图片
input - 输入框
label - 表单标签
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择
...
6元素类型的转换
display:
说明：
常用的属性值：
none 此元素不会被显示
block 元素会被换成块级元素，此元素的前后会带有换行符
inline 此元素会被显示为内联元素，元素前后没有换行符
inline-block 行内块元素（css2.1新增的值）
list-item 此元素会作为列表显示
盒子模型可通过该属性来改变默认的显示类别
1）大部分块元素display属性值默认为block，其中列表li的默认值为list-item。
2）大部分内联元素的display属性值默认为inline,其中input，默认为inline-block（行内块元素），img的显示效果和行内块元素一样，但是是置换元素（替换元素）。
display的全部属性值
| none | 此元素不会被显示。 | ||
|---|---|---|---|
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 | ||
| inline | 此元素会被显示为内联元素，元素前后没有换行符。** | ||
| inline-block | 行内块元素。（CSS2.1 新增的值） | ||
| list-item | 此元素会作为列表显示。 | ||
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 | ||
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 | ||
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 | ||
| table | 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
| ||
| inline-table | 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
| ||
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 | ||
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 | ||
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 | ||
| table-row | 此元素会作为一个表格行显示（类似 | ||
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 | ||
| table-column | 此元素会作为一个单元格列显示（类似 | ||
| table-cell | 此元素会作为一个表格单元格显示（类似 | 和 | ） |
| table-caption | 此元素会作为一个表格标题显示（类似 | ||
| inherit | 规定应该从父元素继承 display 属性的值。 |
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
