css样式
内部样式
<head>
<style type="test/css">
选择器{属性1：属性值1； 属性2：属性值2；属性3:属性值3;}
</style>
</head>
行内式
<标签名 style="属性1：属性值1； 属性2：属性值2；属性3:属性值3;">内容</标签名>
外部样式表
<head>
<link href="css文件的路径" type="text/css" rel="stylesheet"/>
</head>
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
标签显示模式（display）
为了更好的适应环境而完成的自然选择
块级元素（block-level）
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 其中<div>标签是最典型的块元素
特点：
1. 总是从新行开始
2. 高度、行高、外边距及内边距都可以控制
3. 高度默认是容器的100%
4. 可以容纳内联元素和其他块元素
行内元素（inline-level）
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 其中<span>标签最典型的行内元素
特点：
1. 和相邻行内元素在一行上。
2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或则其他行内元素
块级元素和行内元素区别
块级元素特点：
1. 总是从新行开始
2. 高度、行高、外边距及内边距都可以控制
3. 高度默认是容器的100%
4. 可以容纳内联元素和其他块元素
行内元素特点：
1. 和相邻行内元素在一行上。
2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或则其他行内元素
标签显示模式转换display
快转行内：display：iniline
行内转块：display：block
块、行内元素转换为行内块：display：inline-block
此阶段，我们只需关心这三个，其他的是我们后面的工作
css复合选择器
复合选择器是有两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签
交集选择器
交集选择器是 并且的意思 即…又…的意思
p.one 选择的是：类名为.one的段落标签
并集选择器
并集选择器 和 的意思， 就是说，只要逗号隔开的 所以选择器都会执行后面的样式
.one,p,#test{color:#F00;}
表示.one和p和#test 这三个选择器都会执行颜色为红色 通常用于集体声明
后代选择器
他能选择任何包含在内的标签
.class h3{color：red；font-size：25px}
子元素选择器
子元素选择器是指选择符合条件的子元素，需要运用到>符号，下面通过实例来看一下：
.class > p{
color: green;
background-color: orange;
}
属性选择器
选取标签带有某些特殊属性的选择器 我们称为属性选择器
div[class^=font]{ /* class^=font 表示 font 开始位置就行了 */
color: red;
}
div[class$=footer]{ /* class$=footer 表示 footer 结束位置就行了 */
font-size: 30px;
}
div[class*=tao]{ /* class*=tao *= 表示tao 在任意位置都可以 */
color: aqua;
}
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div><hr/>
伪元素选择器（css3）
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行
- E::selection 可改变选中文本的样式
p::first-letter{ /* 选择的是当前文本的第一个单词或者第一个文字 */
font-size: 30px;
color: yellow;
}
p::first-line{ /* 选中的是第一行 */
color: chartreuse;
}
p::selection{ /* 可以改变当前选中文字的样式 */
color: pink;
}
- E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用
p::before{
content:"开始";
}
p::after{
content: "结束";
}
css书写规范
空格规范
【强制】 选择器与 { 之间必须含空格
示例 .selector{}
【强制】属性名与之后的 ； 之间不允许包含空格， ：与属性值之间必须包含空格
示例 font-size:12px;
选择器规范
【强制】 当一个rule包含多个selector时，每个选择器声明必须独占一行
【建议】 选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确
属性规范
【强制】 属性定义必须另起一行
.selector{
margin: 0;
padding: 0;
}
【强制】 属性定义后必须以分号结尾
.selector{
margin: 0;
padding: 0;
}
/*bad*/
.selector{
margin: 0
}
css背景（background）
- background-color 背景颜色
- background-image 背景图片地址
- background-repeat 是否平铺
- background-position背景位置
- background-addachment背景固定还是滚动
背景图片（image）
语法：
background-image:none | url(url)
参数：
none：无背景图（默认的）
url：使用绝对或者相对地址指定背景图像
backg-image背景图片
小技巧：提倡背景图片后面的地址，url不要加引号。
背景平铺
语法：
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数：
repea：背景图像在纵向和横向上平铺（默认的）
no-repeat ：背景图像不平铺
repeat-x：背景在横向上平铺
repeat-y：背景在纵向上平铺
设置背景图片时，默认吧图片在水平和垂直方向平铺以铺满整个元素。
背景平位置（position）
语法：
background-position:length || length
background-position:position || position
参数：
length：百分数 | 有浮点数字和单位表示符组成的长度值。
position ：top | center | bottom |left |center |right
说明：
1.position后面的x坐标和y坐标，可以使用方位名词或者精密单位
2.如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标在后面
背景附着
语法：
background-attachment:scroll | fixed
参数：
scroll：背景图像十岁对象内容滚动
fixed：背景图像固定
说明;
设置或检索背景图像是随对象内容滚动还是固定的。
背景简写
background属性的值的书写顺序推荐
background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景透明（css3）
格式：background：rgba(0,0,0,0.3)
最后一个参数是alpha透明度 取值范围在0-1之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
背景缩放（css3）
通过background-size设置背景图片的尺寸
参数设置：
1.长度单位px或百分比（参照盒子的宽高）
2.设置为cover时，会自定调整缩放比例，保证图片始终填满背景区域。一处会被隐藏
3.设置为contain会自动调整缩放比例，保证图片始终填满背景区域。
多背景（css3）
以逗号分隔可以设置多背景，可用于适应布局
1.一个元素可以设置多重背景图像
2.每组熟悉年使用逗号分隔
3.如果设置的多重背景图之间存在这交集，前面的覆盖后面的
4.为了便面背景色讲图像盖住，背景色通常都定义在最后一组上
凹凸文字
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #ccc;
}
div{
color: #ccc;
font:700 80px "微软雅黑";
}
div:first-child{
/* text-shadow:水平位置 垂直位置模糊距离 阴影颜色; */
text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
}
div:last-child {
/* text-shadow:水平位置 垂直位置模糊距离 阴影颜色; */
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>我是凸起文字</div>
<div>我是凹起文字</div>
</body>
扫一扫
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
