CSS
什么是CSS
CSS全称Cascading Style Sheet层叠样式表
用来调整美化网页(对不同的模块去调整宽度高度背景字体大小等)
HTML用来填入基本网页整体内容和结构划分,而CSS则用来美化调整各个部分
基础语法
可以声明在html的style中,也可以外部导入
选择器
什么是选择器:指定出想要要调整的标签
id选择器:定位到指定id的标签(#+id选择)id不能重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二的标签</title>
<style>
#a{ <!--id为a的标签被修饰 -->
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="a">
</div>
</body>
</html>
类选择器:找到所有此类的标签(.+class)class名可以重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二的标签</title>
<style>
.a{ <!--class为a的标签都被修饰 -->
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="a"></div>
<p class="a"></p>
</body>
</html>
标签选择器:选择所有此标签(标签名)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二的标签</title>
<style>
div{ <!--所有的div标签都被修饰 -->
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="a"></div>
<p class="a"></p> <!--不是div标签所以未被修饰 -->
</body>
</html>
属性选择器:选出所有带有此属性的标签([属性名])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二的标签</title>
<style>
[class]{ <!--含有class属性的标签都被修饰 -->
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="a"></div>
<div id="a"></div> <!--没有class属性所以未被修饰 -->
<p class="a"></p>
</body>
</html>
并集选择器:使用多个选择器逗号隔开(#id,.class,[属性],标签名)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二的标签</title>
<style>
#a,[class]{ <!--包含两种选择器的范围 -->
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="a"></div>
<div id="a"></div>
<p class="a"></p>
</body>
</html>
常用属性
字体属性
font-family:设置字体
font-style:设置斜体
font-variant:英文文本大小写
font-weight:设置字体的粗细
font-size:设置字体大小
颜色与背景属性
color:设置内容颜色
background-color:设置标签背景颜色
background-image:设置背景图案
background-repeat:设置背景图填充重复方式
background-position:设置背景图案
background-size:设置背景图案大小
文本属性
text-align:设置文本的对齐方式
text:indent:设置文本首行缩进
line-height:设置文本的行高
a:link:设置链接为访问时的文本状态
a:visited:设置链接已经访问过的状态
a:hover:设置链接的鼠标激活状态
边框属性
有上下左右和颜色样式宽度各种搭配
border:没有设定方向和修饰属性就是四边加设置颜色宽度样式
border-color:就是全部四边加只设置颜色
border-top:就是全部颜色宽度样式都设置并且只给上面上边框
border-left-style:就是只设置左边且只设置样式
块元素属性
margin外边距与padding内边距
块元素与内联元素
块元素:会独占一行,默认宽度是填充父元素的宽度,高度是内容的高度。可再自定义宽高
常见的块元素有:ul列表、form表单、h1-h6标题、hr水平线、p段落、div
内联元素:不会独占一行,不能设置宽高还有边距这些,范围只是仅仅包裹内容。
常见的内联元素有:a链接、em斜体、img图片、input输入控件、label标签、select下拉选择器、textarea多行文本输入、span
块和内联的转换:
display:block 内转块
display:inline 块转内
display:inline-block 转成内联块,此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够
浮动:通过设置浮动可以到达同行的效果不用去转内联块
Float常跟属性值left、right、none,相对于父元素 Float:none 不使用浮动 Float:left 靠左浮动 Float:right 靠右浮动
绝对定位与相对定位:
对于嵌套元素的相对定位,定位的元素的父元素是用相对定位就行。相当于定位position-relative还是absolute属性是作用于子元素
快到碗里
!