一、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是指框内元素与框之间的距离.