Skip to content

css

###css简介

css概念

css的唯一目的就是让网页具有美观一致的页面

CSS规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)

css引入方式

内联样式(直接写在标签里面的style样式)

内联样式(行内样式) 要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性 温馨提示 缺乏整体性和规划性,不利于维护,维护成本高

截图

内部样式(写在<style>标签里面的样式,常放在<head>标签里面)

内部样式 当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表 温馨提示 单个页面内的CSS代码具有统一性和规划性,便于维护,但是在多个页面之间容易混乱

截图截图外部样式

内联样式(行内样式) 要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性 温馨提示 缺乏整体性和规划性,不利于维护,维护成本高

截图

选择器一

CSS语法规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)

### 全局选择器

可以与任何元素匹配,优先级最低,一般做样式初始化

截图元素选择器

元素选择器 HTML文档中的元素,p、b、div、a、img、body等。 标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的”个性“

截图 温馨提示 1.所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input、div等

		   2.无论这个标签藏的多深,一定能够被选择上

		   3.选择的所有,而不是一个

**类选择器 **

类选择器 规定用圆点 . 来定义,针对你想要的所有标签使用 优点 灵活

截图截图 class属性的特点 1.类选择器可以被多种标签使用

				      2.类名不能以数字开头 

					  3.同一个标签可以使用多个类选择器。用空格隔开

选择器二

ID选择器

ID选择器 针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以#来定义

截图截图 特别强调 1.ID是唯一的

           2.ID不能以数字开头

合并选择器

合并选择器语法:选择器1,选择器2…{} 作用:提取共同的样式,减少重复代码

截图

选择器的优先级 CSS中,权重用数字衡量 元素选择器的权重为:1 classi选择器的权重为:10 id选择器的权重为:100 内联样式的权重为:1000

优先级从高到低:行内样式>ID选择器>类/伪类选择器>元素选择器

字体属性

CSS字体属性定义字体,颜色、大小,加粗,文字样式

颜色color

截图


字体大小font-size

设置文本的大小 能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。

截图

温馨提示 chrome浏览器接受最小字体是12px


文本的粗细font-weight

截图


** 字体样式font-style**

截图

截图


font-family

font-family属性指定一个元素的字体 温馨提示 每个值用逗号分开 如果字体名称包含空格,它必须加上引号

截图

背景属性

CSS背景属性主要有以下几个

截图


背景颜色background-color

截图

截图

背景图像background-image(图片只能是相对路径)

background-image属性 设置元素的背景图像 元素的背景是元素的总大小,包括填充和边界(不包括外边距)。默认情况下background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

截图

截图


平铺背景图像background-repea(默认值是水平垂直都平铺)


截图

截图

设置背景图像的大小background-size

截图

截图

背景图像的起始位置background-position

background-position属性 该属性设置背景图像的起始位置,其默认值是:0%0%

截图

截图