CSS基本语法

最新推荐文章于 2022-11-02 11:31:52 发布

奔赴星空

最新推荐文章于 2022-11-02 11:31:52 发布

阅读量238

点赞数 2

分类专栏： css 文章标签： html

本文链接：https://blog.csdn.net/m0_56133013/article/details/117366626

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css基本语法

7.1 CSS简介

1、HTML的局限性
HTML只关注内容的语义，如

是一个标题,是插入一张图片……很早之前的网页都很简单，没有样式，如贪吃蛇、俄罗斯方块。虽然HTML可以做简单的样式，但使用起来非常繁琐，代码臃肿。
2、CSS 层叠样式表（cascading style sheets）,有时也称为CSS样式表或级联样式表，它也是一种标记语言。
目标：由HTML专注做结构呈现，样式交给CSS，即结构（HTML）和样式（css）相分离

7.2、CSS基本语法
1、选择器{
属性1：属性值；注：属性和属性值以“键值对”
属性2：属性值；的形式出现
… …
}

	选择器：给谁改样式
	属性：    改什么样式	
	属性值：改成什么样子
    位置：CSS放在<style></style>标签里。<style>标签理论上放在<html>标签里的任何位置都可以，不过实际上我们更习惯于放在<head>标签里。

2、CSS代码风格
样式格式书写
紧凑格式：h3 {color: pink;font-size: 20px;}
展开格式：h3 {
（推荐） color: pink;
font-size: 20px;
}
样式大小写
h3 {
（推荐） color: pink;
font-size: 20px;
}

H3 {
        COLOR: PINK;
        FONT-SIZE: 20PX;
}
  空格规范
h3 {
        color: pink;
        font-size: 20px;
}

7.3 CSS引入方式
1、行内样式表（行内式）
位置：写在标签里，控制当前元素的样式
特点：书写繁琐，不推荐大量使用
2、内部样式表（内嵌式/嵌入式）
位置：写在HTML标签内部，控制整个页面的样式
特点：结构和样式部分分离,代码结构清晰。
语法：

3、外部样式表（链接式）
位置：样式单独放在一个css文件里，然后在html中引入。控制。。。的样式
特点：结构和样式完全分离
适用于样式比较多的情况，实际开发中广泛使用
步骤：
新建一个后缀名为.css的文件——在html页面中使用标签引入css文件
格式：
特点：结构和样式完全分离，需要引入，控制多个html页面。
4、导入样式表（导入式）
@import url( “./css/1.css”)

7.4 CSS常见选择器
作用：根据不同需求把不同的标签选出来，简单来说，就是选择标签用的。
分类：基础选择器、复合选择器
基础选择器由单个选择器组成，包括全局选择器、标签选择器、id选择器、类选择器。
1、全局选择器（通配符选择器）
用 * 定义，它表示选取当前页面中所有的元素（标签）
语法：* {
属性：属性值；
… …
}

特殊情况下使用，如全体居中、清除所有元素标签的内外边距。
eg:	* {
		margin: 0px;
		padding: 0px;
	}

2、标签选择器
用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
语法：标签名{
属性：属性值；
… …
}
优点：能快速的为页面中同一类的标签统一设置样式
缺点：不能进行差异化设计，只能选择全部的当前标签
3、id选择器
可以为标有特定id的HTML元素指定特定的样式，具有唯一性
样式用#定义，结构用id调用，只调用一次
语法：#id名 {
属性：属性值；
}
4、类选择器
单独选出一个或某几个标签，可以使用类选择器。
样式用 . 定义，结构用class调用,可以多次调用
语法：.类名 {
属性：属性值；
}
多类名：可以给一个标签指定多个类名（类名之间用空格隔开），这个标签就可以具有这些类名的样式。优点：节省CSS代码，统一修改非常方便）
5、伪类选择器
用于向某些标签添加特殊的效果，如给链接添加特殊效果或选择第n个元素。
伪类选择器最大的特点是用冒号" : "表示，如 :hover、:first-child……

链接伪类选择器：
标签定义的超链接有默认的样式，实际工作中给链接单独指定样式。
a:link 选择所有未被访问（没点击过）的链接
a:visited 选择所有已被访问（点击过）的链接
a:hover 选择所有鼠标悬停时的链接
a:active 选择所有活动（鼠标按下时）的链接
按照L-V-H-A的顺序声明，实际工作中有时只设置一种或两种状态，使用如下写法：
a {
text-decoration: none;
}
a:hover {
color: red;
}