简单上手css 你也可以

初识css

css是样式层叠表(cascading style sheets)的简称.

css也是一种标记语言

作用:

设置html中的文本内容(字体,大小,对齐方式等) 图片的外形(宽高,边框样式,边距等)以及版面的布局和外观显示样式.

css的语法规范

css的规则由两个主要部分构成: 选择器以及一条或多条声明.

选择器是用于指定css样式的html标签 花括号内是对该对象设置的具体样式.

属性和属性值以键值对的形式出现.

css的三种引入方式

行内样式

行内样式表就是在元素标签的内部的style属性中设定css样式,适合于修改简单样式

<标签 style=“属性:属性值;”></标签>

内部样式表:

内部样式表是写到html页面内部,是将所有的css代码抽取出来,单独放倒一个<style>标签中>

选择器{属性:属性值;属性：属性值}

外部样式表

适合于样式多的情况下,样式单独写到css中之后导到html中.

做法:

1.新建一个后缀名为.css的文件,写入文件

2.在html页面中,使用<link>标签引入这个文件

通过link引入外部css文件

1. <link rel="stylesheet" href="外部css文件" />

css基础选择器

作用: 就是根据不同的需求把不同的标签选出来这就是选择器的作用 就是选择标签用的.

标签选择器的语法:

标签名{

​ 属性1: 属性值1;

​ 属性2: 属性值2;

…

}

作用:标签选择器可以把某一类标签全部选择出来,能够快速为页面中同类型的标签统一设置样式.

类选择器

单独选一个或者某几个标签的情况下,可以使用类选择器.

语法:

html：<div class="名字"></div> css.名字{属性：属性值}

快速记忆顺口溜:样式点定义.结构类调用,一个或多个,开发最常用

多类名

语法:

<div class="red font35"> 刘</div>

id选择器

id选择器可以为标有特定id的html元素指定特定的样式

css中 id选择器一"#"来定义.

语法:

#id名{

​ 属性1:属性值1;

​ 属性2:属性值2;

…

}

样式通过#号定义 结构id调用,只能调用一次.

id与class选择器的区别： id的名字是唯一的（体现在js里面） class名字可以任意多个

通配符选择器

在css中 ,通配符使用"*"定义,表示选取页面中所有的元素

语法

*{

属性1: 属性值1;

属性2:属性值2;

…

}