CSS介绍

目录

一.css 介绍

二.CSS基本语法

2.1css 引入方式

2.1.1行间样式引入

2.1.2内部引入方式

2.1.3外部引入方式

三.基础属性

3.1宽高

3.2背景样式

3.2.1背景色  background-color 

3.2.2背景图片   background-image

 3.2.3  设置背景图片的平铺方式             background-repeat

3.2.4设置背景图片的位置                 background-position

四.边框样式

五.文本样式

六.段落样式

---

一.css 介绍

1. 层叠样式表，是一种样式表语言，用来描述HTML和XML文档的呈现。
2. 随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱
3. HTML 页面也越来越臃肿，CSS便随之诞生
4. CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。

• CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML 类似
• CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

重点：

1. CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言
2.  CSS2.0的诞生才真正地把结构与样式          进行分离，从而得到快速的发展

二.CSS基本语法

2.1css 引入方式

给HTML标签添加CSS样式总共有三种样式：行间样式、 内部样式和外部样式三种方式

2.1.1行间样式引入

在HTML标签中添加style属性来设置CSS。语法如下：

style="属性1:值1;属性2:值2;属性3:值3;"

CSS样式由属性和值两部分组成，通过冒号的方式进行连接。多组样式之间使用分号（;）进行分
割。一般规范会在分号后面加一个空格，这样更加方便阅读代码。

例子：

结果：

 在这里就有了

的样式更改：：：：：：：记住

注意：

1. 像素单位
2. 像素单位用px表示，全称 “pixel”。px就是一张图片中最小的点，或者是计算机屏幕最小的点。
3. 百分比单位
4. 百分比单位是一个相对单位，经常在嵌套标签中使用。假如给子标签（也叫内层标签）设置百分比单位，那么这个单位就是相对于父标签（也叫外层标签）的尺寸大小。

例子：百分比

结果：

2.1.2内部引入方式

内部引入方式是通过

rgsdgfswfsf

 内部引入CSS样式，也遵循一定的CSS样式规范，语法格式如下：

选择器 {属性1：值1; 属性2：值2; }

---

2.1.3外部引入方式

• 外部样式的写法与内部样式的写法完全一样
• 只是外部引入方式是将css代码保存在扩展名为.css 的样式表中
• 引入方式通过网页标签中使用标记将外部样式表文件链接到HTML文档中。
• 其语法如下：

1. 语法中必须指定标记的三个属性，其中href 是定义链接外部样式表文件的url，可以是相对路径或绝对路径；
2. rel是定义当前文档与被链接文档之间的关系，
3. stylesheet表示被链接的文档是样式表文件；
4. type是定义链接文档的类型，
5. text/css表示链接的外部文件为CSS样式表。

---

三.基础属性

3.1宽高

CSS通过width、height这两个属性来设置HTML标签的尺寸和大小，即元素的宽高

3.2背景样式

背景样式的属性

属性	含义
background-color	设置背景色
background-image	设置背景图片
background-reprat	设置背景图片的平铺方式
background-position	设置背景图片的位置
background-attachment	设置背景图随滚动条的移动方式

3.2.1背景色  background-color 

 

---

3.2.2背景图片   background-image

 3.2.3  设置背景图片的平铺方式             background-repeat

属性取值：

参数	说明
repeat	水平垂直方向上都是重复平铺的，默认值
repeat-x	只是水平方向重复平铺，垂直方向不重复平铺
repeat-y	只是垂直方向重复平铺，水平方向不重复平铺
no-repeat	水平和垂直方向上都不进行重复平铺

---

 

3.2.4设置背景图片的位置                 background-position

语法格式：

 

background-position:x轴坐标 y轴坐标；

 

---

四.边框样式

边框属性	说明
border-color	边框颜色 （四边）
border-width	边框大小（四边）
border-style	边框样式（四边）solid(实线) dashed(虚线) dotted(点线)
border-left-*	左边框
border-right-*	右边框
border-top-*	上边框
border-bottom-*	下边框

---

五.文本样式

文字相关属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细 （normal:正常 lighter:较细 bold: 较粗 bolder:很 粗）
font-style	字体样式
color	字体颜色

例子：

font-family:字体1，字体2，字体3 /*可指定多种字体，多个字体按照优先顺序排列，以逗号隔开*/

---

六.段落样式

段落样式相关属性

段落属性	说明
text-decoration	文本装饰
text-indent	文本缩进
text-align	文本对齐方式
line-height	行高

text-decoration属性取值

取值	说明
none	无装饰线（默认
underline	下划线
line-through	删除线
overline	顶画线 （少用
blink	文本闪烁 （少用

text-align属性取值

取值	说明
left	左对齐
right	右对齐
center	居中对齐
justify	左右对齐