前端之CSS光速入门
一、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 + /进行快速转换)
3种引入方式对比:
1.内部样式会出现大量的代码冗余,不方便后期的维护,所以不常用.
2.行内样式,只适合于写简单样式.只针对某个标签生效.缺点是不能写太复杂的样式
3.外部样式,html和css实现了完全的分离,企业常用的方式.
样式大小写:虽然CSS不区分大小写,开发的时候统一使用小写字母.
空格规范:冒号后面带空格. 选择器和 { 之间也有空格.
二、CSS选择器
CSS选择器的主要功能就是选中页面指定的标签元素.选中了元素,才可以限制元素的属性.
CSS选择器主要分以下几种:
1.标签选择器
2.类选择器
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、复合选择器
/* 只设置ul下的 li标签下的 a标签,颜色是红色 */
ul li a {
color: blue;
}5、通配符选择器
/* 设置页面中所有的元素,颜色为红色 */
* {
color: red;
}
1.以上三个标签选择器ul li a中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合.
2.不一定是相邻的标签,也可以是"孙子"标签
3.如果需要选择多种标签,可以使用 , 分割, 如 p, div { } 表示同时选中p标签和div标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.
4.选择器的使用遵循就近原则.
三、常用CSS
接下来学习一些常见的CSS样式.
准备如下html
<div class="text1">我是文本1</div>font-family ：字体样式
<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
</style>
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>
color:设置颜色.
.text1 {
color: red;
}颜色有如下几种表达方式:
英文单词:如red, blue.
rgb代码的颜色, 如rgb(255, 0, 0)
十六进制的颜色, 如#ffffff
font-size :设置字体大小
.text1 {
font-size: 32px;
}font-weight ：设置字体粗细
字体粗细这里使用到的是font-weight，注意font-weight后面的参数只能是一些整数，比如100，200，
<sytle>
.three {
font-weight: 100;
}
.four {
font-weight: 900;
}
</style>
<div>
<div class="three">
这是微软雅黑
</div>
<div class="four">
这是宋体
</div>
</div>
背景属性
1、设置背景颜色
background-color
和之前的color非常相似，可以使用英文单词、rgb、#16进制的数字。
注意，背景颜色和文本颜色不要太接近，最好是一个深色一个浅色。
2、设置背景图片
background-image: url(./moon.png);
背景图片默认就是一个平铺的效果，类似于地板砖，挨个平铺。
border:边框
边框是一个复合属性,可以同时设置多个样式,不分先后顺序,浏览器会根据设置的值自动判断.
.text1 {
border: 1px solider purple;
}以上border属性对应设置的维度分别为边框粗细,边框样式,边框颜色.
也可以拆开来设置
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是指框内元素与框之间的距离.