css的基础知识
1.css 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
显示html
2.css创建
（1）行内样式
行内样式显示在 styles卡
<p style="color:red">这是一个段落</p>
（2）内嵌样式
单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 < style> 标签在文档头部定义内部样式表，在head或者body内部取写style标签
（3）外部样式
样式需要应用于很多页面时，外部样式表将是理想的选择
3.css属性
(1)css字体属性 font
- 字体的颜色：color
- 字体系列：font-family
- 字体大小：font-size
- 字体样式：font-style
- 字体的粗细：font-weight
(2)css文本格式 text
- 文本颜色：color
- 行高：line-height
- 对齐元素的文本：text-align
<body style="text-align: center;">
<div style="color: red;text-align: inherit;">
内容
</div>
</body>
- 文本添加修饰：text-decoration
- 文本阴影：text-shadow
- 字符间距：letter-spacing
(3)边框属性 border
- 边框样式：border-style
- 边框宽度：border-width
- 边框高度：border-height
- 边框颜色：border-color
- 左边框：border-left
- 左边框颜色：border-left-color
- 右边框：border-right
- 右边框颜色：border-right-color
- 上边框：border-top
- 上边框颜色：border-top-color
- 下边框：border-bottom
- 下边框颜色：border-bottom-color
px 固定像素单位 根据电脑屏幕的分辨率
两个边界：double 两个边界的宽度和border-width的值相同
border:5px solid red;
边框的大小 样式 颜色
行高：line-height 高度和行高一致 单行文本垂直居中
(4)链接样式
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
(5)css id和class选择器
- id 选择器:可以为标有特定 id 的 html元素指定特定的样式CSS 中 id 选择器以 “#” 来定义
#nav
{
color:red;
}
子父关系选择器：
空格 匹配的是当前元素的所有后代元素
> 匹配的是当前元素的直接子元素
+ 匹配当前元素紧跟其后的元素
~ 匹配的是当前元素之后的所有的匹配元素
- class选择器: class 选择器有别于id选择器，class可以在多个元素中使用。 在 CSS 中，类选择器以一个点"."号显示
.nav
{
text-align:center;
}
(6)CSS分组选择器和嵌套选择器
- 分组选择器：用逗号隔开，写相同的特征
h1,h2,p
{
color:green;
}
- 嵌套选择器 多个元素共用同一个类 可以互相嵌入式使用；
nav.bull{
width: 100px;
height:40px;
}
menu.bull{
text-align：center
}
(7)css框模型
CSS盒模型本质上是一个盒子
包括：
- 外边距：magin
-
margin-left right top bottom 左右上下-
-
边框：border
-
填充：padding
-
padding-left right top bottom 左右上下
内容：content
网页就是有多个盒子通过不同的排列方式(上下排列，左右排列，嵌套排列)堆积而成(8)CSS Display(显示) and Visibility（可见性）
- 隐藏元素 - display:none或visibility:hidden
-
隐藏一个元素可以通过display属性为"none"或"hidden"属性的可见性。但是，两种方法产生不同的结果
-
visibility:hidden可以让您隐藏某个元素，但它仍然需要像 以前一样的空间。该元素将被隐藏，但仍然会影响布局。
-
更改行元素和块元素 display:inline display:inline-block 行元素的大小由内容自动撑开
转行元素 display:block 转块元素 -
css盒子超出隐藏 overflow: hidden auto scroll
(9)css定位（position）
-
static （静态定位） 默认定位 静态定位的元素不会受到top, bottom, left, right影响
-
relative（相对定位） 该元素相对于自己原有的位置，偏移一定的距离，相对的自己
-
absolute （绝对定位） 该元素相对于其父元素偏移一定距离，相对的是父元素，重点是这个父元素也需要设置position属性
-
fixed(固定定位) 相对浏览器定位的 进行移动的 可分层
注意：固定定位 绝对定位的元素需要设置宽高
(10)float浮动 -
元素可以围绕其他元素向左或向右被推动 元素的水平方向浮动意味着元素只能左右移动而不能上下移动
-
float：left/right/none/inherit
-
clear：清除浮动
(11)伪类和伪元素
anchor伪类
-
:link a:link 选择所有未访问链接
-
:visited a:visited 选择所有访问过的链接
-
:active a:active 选择正在活动链接
-
:hover a:hover 把鼠标放在链接上的状态
-
:focus input:focus 选择元素输入后具有焦点
-
:first-letter p:first-letter 选择每个
元素的第一个字母
-
:first-line p:first-line 选择每个
元素的第一行
-
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
-
:before p:before Insert content before every
element
-
:after p:after 在每个
元素之前插入内容
-
:lang(language) p:lang(it) 为
元素的lang属性选择一个开始值
(12)CSS 水平对齐：
中心对齐,使用margin属性
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
==position属性设置左，右对齐 ==
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
float属性对齐
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
(13)图片各种变化样式 (filter)
- 图片透明： opacity(百分比)
- 图片模糊： blur(10px)
- 图片暗和高亮 brightness (百分比）
- 图片的对比度 contrast（百分比）
- 图片的灰度 grayscale（百分比）
- 图片饱和度 saturate（百分比）
(14)css兼容性
css的兼容性如何处理：
优雅降级 向上兼容
（ IE7 IE8 IE9 IE10 ms 谷歌-webkit- 火狐moz ）
浏览器众多：对css解析出的效果不一致
9457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
