内部样式
<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: #CCCCCC;
}
div{
color: #CCCCCC;
font: 700 80px "微软雅黑";
}
div:first-child{
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child{
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>
</body>
效果: