CSS基础
CSS 指层叠样式表 (Cascading Style Sheets)
W3school
1.CSS入门:——>三种方式
<head>
<meta charset="utf-8" />
<title>标题</title>
<style>
/*
* 选择器{
* 样式;
* }
标签、类、id选择器,其他选择器:并集、交集、通配符选择器
*/
a{
color: red;
font-size: 26px;
/*文本修饰:去掉下划线*/
text-decoration: none;
}
</style>
<!--特点:可以一次性控制多个标签
缺点:和HTML标签混合使用
-->
</head>
<body>
<!--CSS使用方式1——>**行内样式**
弊端:1、一次只能控制一个标签
2、CSS代码:font-size: 36px;color: red;
与HTML标签混合使用,后期不利于管理
-->
<a style="font-size: 36px;color: red;" href="#">超链接1</a><br />
<!--CSS使用方式2——>**内部方式**
在head标签中指定一个子标签:style标签:里面书写CSS代码
style{
CSS属性名称:css属性值
}
-->
<!--CSS使用方式3——>**外部方式**(实际开发中推荐方式)
需要在CSS文件夹中单独写CSS代码
在当前页面使用link(在head标签中指定)标签引入外部css文件即可
stylesheet:样式库(样式代码必须在样式库中定义)
rel:固定写法:关联层叠样式表
-->
<!--<link href="???.css" rel="stylesheet"/>-->在head中书写
<a href="#">超链接1</a><br />
<a href="#">超链接2</a><br />
<a href="#">超链接3</a><br />
</body>
2.选择器
CSS选择器:标签选择器、类(class)选择器、id选择器
其他的选择器:并集、交集(子元素选择器)、通配符(*{})选择器
伪类选择器:研究鼠标经过标签的4中状态
- 标签选择器:
<style>
div{
color:red;
}
</style>
- 类选择器:
在标签中给定class属性(同一个html页面上多个标签可以指定同名的class属性)格式:
.class属性值{
CSS属性:CSS属性值;
}
class选择器的优先级>标签选择器
- id选择器:
注意:(1)标签中给定一个id属性
(2)在同一个HTML标签中,多个标签的id属性必须唯一
后面的js:DOM编程:
document.getElementById(“id属性值”)
格式:#id属性值{
CSS属性:CSS属性值
}
id选择器的优先级>class选择器>标签选择器
并集选择器:选择器1,选择器2…{}
交集(子元素)选择器:选择器1 选择器2…{}【选择器2的元素是选择器1的子元素】
浏览器拆分表格:
将表格的所有行:划分tbody标签中
表格标签默认拆分为三个部分
thead头部分,tbody中间内容部分,tfoot脚部分
将表格拆分三部分之后,为了解决用户体验问题,无需将table标签加载完毕就可以访问
- 伪类选择器:
又称为(锚伪类),描述鼠标控制标签的状态
link状态:当前标签没有访问过的状态
hover状态:鼠标经过标签的一种状态(使用最多)
active状态:激活状态(点击但没有松开状态)
visit状态:访问过多状态(点击后并且松开了)
格式:选择器:状态名称{css样式;}
循环显示格式:link、visit、hover、active
注意:在CSS定义,hover必须置于link、visit之后,active必须置于hover之后才有效
鼠标经过每一行,当前行的背景色变为蓝色(除过表头):css背景属性background-color【表头用thead,后面的用tbody(控制tbody下的tr:hover)】
tbody tr:hover{
background-color:blue;
}
body体可以看成一个大的div
display:none(图片的隐藏)、block(显示)、inline(设置元素在同一行上)
3.CSS常见的样式属性【div+css】
CSS字体属性、文本属性、背景属性、表格属性、边框属性、浮动属性、列表属性
(1)CSS文本常用属性:
字体颜色属性:color
字符间距:letter-spacing
文本排列:text-align
文本修饰:text-decoration(none:无下划线;underline:下划线;overline:上划线;line-through:中划线)应用场景:电商网站中:商场价、市场价(折扣)
单词间距:word-spacing(系统默认:将两个字符组成一个单词)
(2)CSS字体:
front-family:指定字体的类型(字体库存在类型)
front-size:字体大小
front-style:字体样式(normal:默认标准、italic:斜体、oblique:倾斜)
front-weight:字体粗细程度(如果不指定为normal、bold:适当加粗、bolder:更粗)
简写属性(符合顺序)
front:front-style front-weight front-size front-family;
(3)CSS背景常用属性
background-color:背景颜色
background-image:背景图片url(…)
background-repeat:设置背景图片是否重复以及如何重复,如果没有指定这个属性:默认值为repeat(x轴y轴都重复)、no-repeat(无重复)、repeat-x、repeat-y
background-position:设置背景图片的起始位置,默认值:top left
【图片位置:top(全)、center(一半)、bottom(无)】
【浏览器位置:left、center、right】
背景简写:(顺序)background:background-color background-image background-repeat background-position
(4)CSS表格属性
将表格的边框线与单元格之间空隙:border-collapse:collapse;
【table表格:标签属性:cellspacing (两个意思同)】
(5)CSS边框
div标签的边框显示:(1)边框的颜色、宽度、样式(单实线、双实线、虚线、点)
div{
<!--指定div块标签的宽度与高度-->
width:200px;
height:200px;
<!--块标签:四个边 边框颜色-->
border-top-color:blue;
border-left-color:blue;
border-right-color:blue;
border-bottom-color:blue;
<!--四个边框的宽度-->
border-top-width:20px;
border-left-width:20px;
border-right-width:20px;
border-bottom-width:20px;
<!--四个边的样式(显示)
div标签要显示边框必须要指定style
-->
border-top-style:solid;单
border-top-style:dashed;虚
border-top-style:dotted;点
border-top-style:double;双
}
(1)边框颜色、宽度、样式简写属性:
border-color:上 右 下 左(默认)
(2)如果某一个边没有设置边框颜色、宽度、样式,会补齐对边的颜色、宽度、样式
(3)边框的简写属性
border:border-width border-style border-color;
(6)CSS浮动(层级布局)
浮动属性:float
给某个元素设置浮动之后(left、right),当前元素就脱离了
当前文档流,当前元素不占一行空间,后边的元素就进行移动。
【清除浮动属性】clear属性:both(当前元素的左右两边没有浮动元素)
(7)CSS列表属性
list-style-type:none(去掉列表的标记)
list-style-image:url(路径)
4.盒子模型
【都符合边框属性的特点:上 右 下 左】
将所有的元素(标签),使用div进行包裹设置每一个标签对应的样式
padding:具体内容与边框之间的距离
margin:盒子与盒子(将标签使用div包裹起来)之间的距离
5.CSS定位(三种方式)
定位属性:position
(1)绝对定位:absolute:针对父标签(body)进行移动(向下、向右)
(2)相对定位:relative:针对之前元素进行移动(常用)
(3)固定定位:fixed:随着滚动条滚动,永远在网页中间
应用场景:网站中间弹出对话框,随着滚动条滚动,永远在网页中间。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:200px;
height: 200px;
border: 1px solid #000;
}
#div1{
background-color: #F00;
}
#div2{
background-color: #00F;
}
#div3{
background-color: #0F0;
/*position: absolute;*/
position:relative;
top:20px;
left: 20px;
/*定位属性 absolute:top、left*/
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>