CSS基础

最新推荐文章于 2024-10-10 16:54:25 发布

aaa329512

最新推荐文章于 2024-10-10 16:54:25 发布

阅读量28

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/aaa329512/article/details/132068334

版权

CSS基础

CSS基本语法
- CSS概述
- CSS基本语法
CSS基本样式
CSS引入方式
CSS样式表优先级
CSS中的冲突、层叠、继承
CSS选择器

CSS基本语法

CSS概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS基本语法

CSS的定义是由三部分组成的，选择符( selector)、属性( properties)、属性值（value）语法如下：
在这里插入图片描述

<style>
   h3{color:coral;}
   /*h3是选择器，{}是color:coral;是声明*/
   /*color是属性,coral是值*/
<style>
</head>
 <body>
   <h3>欣知大数据</h3>
</body>

CSS基本样式

文档流的顺序：上左下右
行级标签：按照文档流的顺序依次排列
块级标签：独占一行

基本样式

宽：width:100px;
高:height:100px ;
背景颜色:background-color:coral;
注意：行级标签设置的宽高不起作用，行级标签的宽高根据内容的大小自适应

在这里插入图片描述

CSS中颜色表示

单词表示: red、green、blue…
十六进制表示:取值范围 (0～9 && a～f)
RGB 三原色表示:取值范围 (0～255)
实例：
在这里插入图片描述

CSS注释

CSS 注释以 /* 开始, 以 */结尾

CSS引入方式

内联样式表

内联样式指将CSS规则混合在HTML标记中使用的方式。CSS规则作为HTML标记style属性的属性值。

<body>
    <div style="width: 500px;height: 400px;border: 1px solid black;font-size: 30px;">
<body>

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
style 标签在文档头部定义内部样式表

<style type="text/css">
    选择器{
        属性:属性值;
        属性:属性值;
        ……
    }
</style>

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部
样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个
页面使用 < link > 标签链接到样式表

在这里插入图片描述
内联样式、内部样式、外部样式之间的本质区别:
(1)外部样式用于定义整个网站样式。
(2)内部样式用于定义整个网页样式。
(3)内联样式用于定义某个标记样式。

CSS样式表优先级

就近原则
相同样式优先级：
当设置相同样式时，后面的优先级较高。
但不建议重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置相同样式那么后写的样式优先级更高
单一样式优先级
style 行间> id > class >tag > * > 继承注：！important 强制优先

CSS中的冲突、层叠、继承

冲突
两个对同一标签属性进行设置不同样式时，就产生了冲突
层叠
设计几种不同样式在最终显示时，会将几种效果叠加显示
继承
文字相关的样式可以被继承
布局相关的样式不能被继承

CSS选择器

1、全局选择器
全局通用的样式选择器又叫做通配符选择器

在这里插入图片描述
2、标签选择器
HTML 中定义的标签可以作为选择器

3、类选择器
类(class )选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用

.类选择器名称{
    样式属性:属性值;
    样式属性:属性值;
    ……
}

4、id选择器
id在一个页面中不能重复，所有id选择器只被一个元素应用

#ID选择器名称{
    样式属性:属性值;
    样式属性:属性值;
    ......
}

5、群组选择器

选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}

层次选择器

后代选择器空格
子代选择器 >
注：父子关系必须是上下级关系紧挨在一起
相邻兄弟 +
通用兄弟 ~

伪类选择器

UI 伪类选择器：
通常用在 a 标签(切记顺序位置)
E:link{ 属性:属性名}初始状态默认状态
E:visited{属性:属性名}超链接被访问后的状态
E:hover{属性:属性名}超链接鼠标悬浮时的状态
E:active{属性:属性名}超链接被激活时的状态
E:focus{属性:属性名}向拥有键盘输入焦点的元素添加样式
E:lang{属性:属性名}向带有指定 lang 属性的元素添加样式
input:checked 选中每个被选中的 input 元素
input:disabled 选择每个禁用的 input 元素
input:enable 选择每个启动的 input 元素
E：：after{content:” ”}
E：：before 通过伪类的方式给元素添加一个文本内容
2.结构型伪类选择器：
E:root 选择文档根元素（不太常用）
E:nth-child() 元素的第 n 个相同元素
E:first-child 第一个子元素
E:last-child 最后一个子元素
E:only-child 仅有的一个子元素
E:nth-of-type() 匹配同类型中的第 n 个同级兄弟选择器元素 E
E:first-of-type 匹配同类型中的第一个同级元素 E
E:last-of-type 匹配同类型中的第一个同级元素 E
E:only-of-type 只有一种类型的子元素
E：empty 匹配没有任何子元素的元素 E

属性选择器

1）E[title]只有属性名
2）E[title=“value”]属性名和值
3）E[title ~=“value”]值为多个词中间有空格隔开，属性值在其中
4）E[title^=“value”]属性值是以 value 开头
5）E[title $=“value”]属性值是以 value 结束
6）E[title *=“value”]属性值包含 value
7）E[title |=“value”]属性值为 value 或 value