CSS介绍
什么是CSS?
CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式.
CSS能够对网页中元素位置的排版进行像素级的精确控制,实现美化页面的效果.能够做到页面的样式和结构分离.
CSS可以理解为"东方四大邪术"的化妆术.
对页面展示进行化妆.
基本语法规范
选择器 + {一条/N条声明}
选择器决定针对谁修改(找谁)
声明决定修改啥.(干啥)
声明的属性是键值对.使用 ; 区分键值对,使用 : 来区分键和值.
<style>
p {
/*设置字体颜色*/
color: red;
/*设置字体大小*/
font-size: 32px;
}
</style>
<p>hello</p>注意:
CSS要写到style标签中(后面会介绍其它方法)
style标签可以放到页面的任意位置,一般放在head标签内.
CSS使用/**/进行注释.(使用ctrl + /进行快速转换)
引入方式
| 引入方式 | 语法描述 | 示例 |
| 行内样式 | 在标签内使用style属性 | <div style="color:green">绿色</div> |
| 内部样式 | 定义<style>标签,在标签内部定义CSS样式 | <style> h1{...}</style> |
| 外部样式 | 定义<link>标签,通过href属性引入外部CSS文件 | <link rel="stylesheet" href="[CSS文件路径]"> |
3种引入方式对比:
1.内部样式会出现大量的代码冗余,不方便后期的维护,所以不常用.
2.行内样式,只适合于写简单样式.只针对某个标签生效.缺点是不能写太复杂的样式
3.外部样式,html和css实现了完全的分离,企业常用的方式.
规范
样式大小写:虽然CSS不区分大小写,开发的时候统一使用小写字母.
空格规范:冒号后面带空格. 选择器和 { 之间也有空格.
CSS选择器
CSS选择器的主要功能就是选中页面指定的标签元素.选中了元素,才可以限制元素的属性.
CSS选择器主要分以下几种:
1.标签选择器
2.class选择器
3.id选择器
4.复合选择器
5.通配符选择器
1.标签选择器
/* 选择所有的a标签,设置颜色为红色 */
a {
color: red;
}
/* 选择所有的div标签,设置颜色为绿色 */
div {
color: green;
}2.类选择器
/* 选择class为font32的元素,设置字体大小为32px */
.font32 {
font-size: 32px;
}一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分割,这种做法可以让代码更好地被复用).
3.ID选择器
/* 选择id为submit的元素, 设置元素为红色 */
#submit {
color: red;
}id是唯一的,不能被多个标签使用(是和类选择器的最大区别)
4.通配符选择器
/* 设置页面中所有的元素,颜色为红色 */
* {
color: red;
}5.复合选择器
/* 只设置ul下的 li标签下的 a标签,颜色是红色 */
ul li a {
color: blue;
}1.以上三个标签选择器ul li a中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合.
2.不一定是相邻的标签,也可以是"孙子"标签
3.如果需要选择多种标签,可以使用 , 分割, 如 p, div { } 表示同时选中p标签和div标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.
4.选择器的使用遵循就近原则.
常用CSS
接下来学习一些常见的CSS样式.
准备如下html
<div class="text1">我是文本1</div>color
color:设置字体颜色.
.text1 {
color: red;
}颜色有如下几种表达方式:
英文单词:如red, blue.
rgb代码的颜色, 如rgb(255, 0, 0)
十六进制的颜色, 如#ffffff
font-size
font-size:设置字体大小
.text1 {
font-size: 32px;
}border
border:边框
边框是一个复合属性,可以同时设置多个样式,不分先后顺序,浏览器会根据设置的值自动判断.
.text1 {
border: 1px solider purple;
}以上border属性对应设置的维度分别为边框粗细,边框样式,边框颜色.
也可以拆开来设置
| 样式 | 说明 | 取值 |
| border-width | 设置边框粗细 | 数值 |
| border-style | 设置边框样式 | dotted:点状 solid:实线 double:双线 dashed:虚线 |
| border-color | 设置边框颜色 | 同color |
border: 1px solid purple; 就等同于以下代码:
.text1 {
border-width: 1px;
border-style: solid;
border-color: purple;
}width/height
width:设置宽度
height:设置高度
只有块级元素可以设置宽高
块级元素是html标签的一种显示模式,对应的还有行内元素.
常见的块级元素:h1-h6,p,div等
常见的行内元素: a span
块级元素独占一行,可以设置宽高.
行内元素不能独占一行,不能设置宽高.
改变显示模式
使用display属性可以修改元素的显示模式.
display:block 改成块级元素(常用)
display:inline 改成行内元素(很少用)
.text1 {
width:200px;
height:100px;
}padding(内边距)
padding:内边距,设置内容和边框之间的距离.
内容默认是顶着边框来设置的,用padding来控制这个距离.
.text {
padding: 20px;
}padding也是一个复合样式,可以对四个方向分开设置.
padding-top
padding-bottom
padding-left
padding-right
margin(外边距)
margin:外边距,设置元素和元素之间的距离.
margin也是一个复合样式,可以给四个方向都加上外边距.
margin-top
margin-bottom
margin-left
margin-right
margin和padding之间的区别:margin是指框与框之间的距离,而padding是指框内元素与框之间的距离.
