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 + /进行快速转换)

引入方式

引入方式	语法描述	示例
行内样式	在标签内使用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是指框内元素与框之间的距离.