CSS基础

目录

一、什么是CSS

二、基本语法

行内样式表

内嵌样式表

外部样式表

三、选择器

四、文本

五、背景

六、CSS伪类

七、透明

八、块级，行级，行级块标签

九、DIsplay

---

一、什么是CSS

CSS是Cascading Style Sheets(级联样式表)，是一种样式表语言，用于为HTML文档控制外观，定义布局，可以将页面的内容和表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或在HTML文档的某一部分

二、基本语法

行内样式表

又称内联样式，行间样式，内嵌样式。是通过标签的style属性来设置元素的样

<标签名 style ="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>

内嵌样式表

将CSS 代码集中写在HTML文档的head头部标签中，并且用style标签定义

<style type="text/css"> 样式内容 </style>

外部样式表

将所有的样式放在一个或多个以.css为扩展明的外部样式表文件中，通过link标签将外部样式表文件连接到HTML文档中

<link href="引入的样式文件"rel="styleSheel"type="text/css">

三、选择器

标签选择器：标签名{}

类选择器：.class属性值{}

id选择器：#id属性值{}

选择器组合：选择器1，选择器2，选择器N{}

通配选择器：*{}

四、文本

color：字体颜色

font-size：字体大小

font-family：字体

text-align：文本对齐

text-decoration:line-through：定义穿过文本下的一条线

text-decoration:underline：定义文本下的一条线

text-decoration:none：定义标准的文本

font-style: italic;斜体文本

font-weight:字体粗细

line-height:设置行高

letter-spacing可以指定字符间距

text-indent用来设置首行缩进

五、背景

background-color背景颜色

background-image背景图片

background-repeat背景重复

background-size背景尺寸

background- position 背景位置

六、CSS伪类

:hover伪类表示鼠标移入的状态

:active表示的是被点击的状态

:focus向拥有键盘输入焦点的标签添加样式。

七、透明

opacity属性设置标签的不透明度级别 值为0.0(完全透明)到1.0(完全不透明)

八、块级，行级，行级块标签

块级标签：无论内容多少，都会独自占据一行

行级标签：只占自身大小的标签，不会占一行

注意：一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签

九、DIsplay

通过display样式可以修改标签的类型

block:设置标签为块表签

inline:设置标签为行级标签

inline-block:设置标签为行级块标签

none:隐藏标签