小生整理之前学习做过的笔记，分享出来，后续笔记会陆续整理出来，不喜勿喷~~~~~
如有错误，虔请各位大牛指正~~~
CSS3(一)
1、CSS
级联样式（Cascading Style Sheet），表现HTML或者XHTML文件样式的计算机语言。包括对文本。字体颜色、颜色、边距、高度、宽度、背景图片、网页定位灯的设定。
CSS样式的优势
- 内容与变现分离
- 网页的表现统一
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于网页的css，有利于网页被搜索引擎收录
2、CSS基本语法
选择器 {
声明
属性名: 属性值 ;
}
css的最后一条语句的声明是可以被省略的，但是按照W3C的标准约定，建议把最后一条也加上。
3、HTML中的引用方式
-
行内样式
在html的标签中，添加“style”关键词，直接在标签中定义CSS样式。
<h1 style="color:red"> </h1>优点：在小范围内可以单独设置
缺点：难以维护
-
内部样式
在当前网页中，定义
<style type = 'text/css'>,在内部编写css代码、<head> <style type="text/css"> css代码 </style> </head>优点：方便在同页面中修改代码
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
-
外部样式
单独的建立一个样式文件（.css），放置css文件夹中去。
-
链接式（常用/重点）
使用HTML标签导入css文件。
<link href="style.css" rel="stylesheet" type="text/css" /> -
导入式（了解）
通过@importcss的指令导入。
<head> …… <style type="text/css"> <!-- @import url("style.css"); --> </style> </head> -
链接式和导入式的区别
- 标签属于XHTML，@import是属于CSS2.1
- 使用链接的css文件先加载到网页中去，在进行编译显示
- 使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页中去
- @import是属于CSS2.1特有的特效，对不兼容CSS2.1的浏览器是无效的
-
CSS样式应用优先级
- 行内样式>内部样式>外部样式
- 遵循就近原则
-
4、基本选择器
4.1id选择器
在选择器的前面添加一个“#”，在使用时，通过标签中的“id”属性进行引用。在同一页面中，id只能出现一次，作为标识使用，所以应用的面不广，一般都作为块级布局元素使用。
#div1 { font-size:16px;}
<div id="div1"></div>
4.2类选择器
在选择器的前面加一个"."，在使用时，通过标签中的"class"属性进行引用。最大的优势是可以复用，所以在日常的操作中应用的最多。
.div1 { font-size:16px;}
<div class="div1"></div>
4.3标签选择器
利用HTML的标签作为选择器的名称，特点是一旦选择，所有的页面中的相同标签，都会被应用相同的效果。
div{
}
<div>
</div>
4.4全局选择器
能够将全部的元素统一设置为一种格式。
*{
}
5、高级选择器
5.1层次选择器
在html中，可以将所有的标签都看作带有层次性关系的树形结构，上下级具有父子关系，同级具有兄弟关系的特点。
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>F | 子代选择器 | 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且匹配的元素紧位于匹配的E元素后面 |
| E~F | 通用兄弟选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
/*后代选择器*/
div p{
}
/*子选择器*/
div>p{
}
/*相邻选择器*/
div+div{
}
/*通用兄弟选择器*/
div~p{
}
5.2结构伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E |
| E:last-child | 作为父元素的最后一个子元素的元素E |
| E F:nth-child(n) | 选择父级元素的E的第n个子元素F，（n可以是1、2、3），关键字为even、odd |
| E:first-of-type | 选择父元素内具有指定类型的最后一个E元素 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
| E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
/*寻找第一个子元素是li的选中，如果第一个元素非li，就不会选中该元素，下面即使出现了li也不会
再选中。*/
ul li:first-child{
}
/*寻找最后一个子元素是li的选中，如果最后一个元素非li，就不会选中该元素，上面即使出现了li也
不会再选中。*/
ul li:last-child{
}
/*找到某个对应的索引li,可以使用odd【奇数】以及even【偶数】进行设置，实现隔行的设置需求*/
ul li:nth-child(2) {
}
/*找到第一个匹配的元素,先看元素的类型，再确定位置*/
ul li:first-of-type{
}
ul li:last-of-type{
}
/*找到某个对应的索引li,可以使用odd【奇数】以及even【偶数】进行设置，实现隔行的设置需求*/
ul li:nth-of-type(n) {
}
nth-of-child:在父级里从第一个元素开始查找，不分类型
nth-of-type:在父级元素先看类型，再看位置
5.3属性选择器
| 属性选择器 | 功能描述 |
|---|---|
| E[attr] | 选择匹配具有属性的attr的E元素 |
| E[attr=val] | 选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写） |
| E[attr^=val] | 选择匹配的元素E，且E元素定义了属性attr，其属性是以vla开头的任意字符串 |
| E[attr$=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 |
| E[attr*=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值包含了"val"，换句话说，字符串val与属性值中的任意位置性匹配 |
/*在标签中必须包含某个属性*/
input[type]{
}
/*在标签中必须包含某个属性，且某个属性值必须是与条件相等的*/
input[type='button']{
}
/*在标签中必须包含某个属性，且以某个条件作为起始*/
input[type^='b'] {
}
/*在标签中必须包含某个属性，且以某个条件作为结束*/
a[href$='cn']{
}
/*在标签中必须包含某个属性对应的部分内容匹配*/
a[href*='baidu']{
}
6、字体与文本样式
6.1字体样式
| 属性名 | 含义 | 举例 |
|---|---|---|
| font-family | 设置字体类型 | font-family:“隶属”; |
| font-size | 设置字体大小 | font-sixe:12px; |
| font-style | 设置字体风格 | font-style:italic; |
| font-weight | 设置字体粗细 | font-weight:bold; |
| font | 在一个声明中设置所有字体属性 | font:italic bold 36px “宋体” |
6.2文本样式
| 属性 | 含义 | 举例 |
|---|---|---|
| color | 设置文本颜色 | color:#00c; |
| text-align | 设置元素水平对齐方式 | text-align:right; |
| text-indent | 设置首行文本的缩进 | text-indent:20px; |
| line-height | 设置文本的行高 | line-height:25px; |
| text-decoration | 设置文本的装饰 | text-decoration:underline; |
text-align：left right center justify(两端对齐)
line-height:行高，当一个元素的高度与行高一致时，就会实现垂直居中
text-decoration:overline(上划线) line-through(中划线、删除线)
6.3文本阴影
可以让文本出现阴影效果
text-shadow: 颜色 x轴 y轴 模糊
p{
/*颜色 x轴 y轴 模糊半径*/
text-shadow: rgba(0,0,0,0.3) 3px 3px 3px;
}
<body>
<p>武朝末年，岁月峥嵘，天下纷乱，金辽相抗，局势动荡，百年屈辱，终于望见结束的第
一缕曙光，天祚帝、完颜阿骨打、吴乞买，成吉思汗铁木真、札木合、赤老温、木华黎、博尔忽、博尔
术、秦桧、岳飞、李纲、种师道、唐恪、吴敏、耿南仲、张邦昌，忠臣与奸臣的较量，英雄与枭雄的博
弈，胡虏南下，百万铁骑叩雁门，江山沦陷，生灵涂炭，一个国家与民族百年的屈辱与抗争，先行者的
哭泣、呐喊与悲怆……
而在这之前一点点，江宁城中，暗流涌动，一个商贾家毫不起眼的小小赘婿，正在很没
责任感地过着他那只想吃东西、看表演的悠闲人生……
</p>
</body>
7、超链接伪类
| 伪类名称 | 含义 | 示例 |
|---|---|---|
| a:link | 未单击访问时超链接样式 | a:link{color:#9f9f9f} |
| a:visited | 单击访问后超链接样式 | a:visited{color:#333} |
| a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#666} |
| a:active | 鼠标单击未释放的超链接样式 | a:active{color:#999} |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*没有访问时的样式*/
a:link{
color: gray;
text-decoration: none;
}
/*已经访问过的颜色*/
a:visited{
color: gray;
}
/*鼠标悬停时效果*/
a:hover{
color: red ;
}
/*鼠标激活时效果*/
a:active{
color: blue ;
font-size: 10em;
}
</style>
</head>
<body>
<a href="hello.html">helloworld</a>
</body>
</html>
8、列表样式
8.1 list-style-type
设置列表的样式类型，代表更改列表前面的原始样式。
| 值 | 说明 | 语法示例 |
|---|---|---|
| none | 无标记符号 | list-style-type:none; |
| disc | 实心圆 | list-style-type:disc; |
| circle | 空心圆 | list-style-type:circle; |
| square | 实心方块 | list-style-type:square; |
| decimal | 数字 | list-style-type:decimal; |
8.2 list-style-image
设置列表的标识值，将标识值更改为图片样式。
8.3 list-style-position
设置列表的标识值显示位置，有两个值可以选择
- inside
- outside
8.4 list-style
简写方式，能够同时设置以上的选项内容，通常情况下都是采用none。
li{
list-style: none;
}
9、背景样式
背景样式是在背景颜色之上，能够修饰页面的某个模块的内容，还可以编写文本。
9.1 background-color
背景颜色
{
background-color: yellow ;
}
9.2 background-image
背景图片
{
background-image: url("相对位置"),url() ;
background-image: linear-gradient(方向to xxx,颜色1,颜色2，颜色n...)
}
9.3 background-repeat
背景重复形式
- repeat:沿水平和垂直两个方向平铺
- no-repeat:不平铺，即只显示一次
- repeat-x:只沿水平方向平铺
- repeat-y:只沿垂直方向平铺
{
background-repeat: no-repeat
}
9.4background-position
背景定位
| 值 | 含义 |
|---|---|
| Xpos Ypos | 单位：px；Xpos表示水平位置，Ypos表示垂直位置 |
| X% Y% | 使用百分比表示背景的位置 |
| X Y方向关键词 | 水平方向的关键词：left、center、right；垂直方向的关键词：top、center、bottom |
应用像素的方式实现位移的效果比较常用。
{
background: url("") 50px 30px;
}
x轴的正数是向右移动
y轴的正数是向下移动
9.5 background-size
设置背景大小显示样式
| 属性值 | 描述 |
|---|---|
| auto | 默认值，使用背景图片保持原样 |
| percentage | 当时用百分比时，不是相对于背景的尺寸来计算的，而是相对于元素的宽度来计算 |
| cover | 整个图片放大填充整个元素 |
| contain | 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域 |
{
background-size: auto| percentage| cover| contain
}
10、盒子模型
在网页中，所有的标记（markup）都可以看作是一个个盒子，通过盒子可以很方便的实现定位。
10.1 宽度
通过width可以设置盒子的宽度。
{
width: 1200px| 100%;
}
10.2 高度
通过height可以设置盒子的宽度。
{
height: 1200px| 100%;
}
10.3 外边距(margin)
两个盒子的距离就是外边距。
{
margin-top: xxxpx; /*上边距*/
margin-right: /*右边距*/
margin-bottom: /*下边距*/
margin-left: /*左边距*/
margin: xxx /*全部的位置设置统一效果*/
margin: xxx xxx ; /*左右和上下单独设置*/
margin: 3px 5px 7px; /*上和左右以及下分别设置*/
}
在页面中对拥有固定宽度的块级元素设置设置"margin:0px auto;"可以实现元素的居中效果。
10.5 内边距(padding)
盒子和内容之间的距离就是内边距。
{
padding-top: xxxpx; /*上边距*/
padding-right: /*右边距*/
padding-bottom: /*下边距*/
padding-left: /*左边距*/
padding: xxx /*全部的位置设置统一效果*/
padding: xxx xxx ; /*左右和上下单独设置*/
padding :3px 5px 7px; /*上和左右以及下分别设置*/
}
内边距可能会修改盒子的自身大小！
10.5 content
盒子中的内容（块级、行级、块级行元素）
10.6 border
盒子边距
-
border-color
border-top-color 上边框的颜色 border-top-color:#369; border-right-color 右边框颜色 border-right-color:#369; border-left-color 左边框颜色 border-left-color:#369; border-bottom-color 下边框颜色 border-bottom-color:#369; border-bottom-color 四个边框为同一颜色 border-color:#369; 上下边框颜色#333；
左右边框颜色#666；border-color:#369 #000; 上边框颜色#333；
左右边框颜色#666；
上边框颜色#333；border-color:#369 #000 #f00; 上、右、下、左边框颜色：#222、#333、#444、#555 border-color:#369 #000 #f00 #ff00ff; -
border-width
- border-style
该样式包括以下选项值：
- none
- hidden
- dotted
- dashed
- solid
- double
10.7 box-sizing
在css中，有两个盒子的显示形式，一种是标准文档模式盒子，还有一种IE盒子（怪异盒模型）
-
标准盒模型(content-box)
使用content内容部分+内边距+外边距+border宽度是最终的盒子的大小。有可能导致盒子模型的宽度和高度发生变化。
-
怪异盒模型(border-box)
将border、padding、margin再融合content形成一体的大小，可以保持外层盒子总大小不变。
div { box-sizing: content-box| border-box; }
1741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
