css基础

最新推荐文章于 2024-07-30 23:06:43 发布

G111222y

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量24

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/G111222y/article/details/132070571

版权

css

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

css基础语法

css概述

1.css指层叠样式表
2.样式定义如何显示html元素
3.样式通常存储在样式表中
4.把样式添加到HTML4.0中是为了解决内容与表现分离的问题
5. 外部样式表可以极大提高工作效率
6. 外部样式表通常存储在 CSS 文件中
7. 多个样式定义可层叠为一个

css基本语法

在这里插入图片描述

<style>
h3{color:coral;}
/*h3是选择器，{是color：coral;是声明}*/
/*color是属性，coral是值*/
</style>
<head>
<body>
  <h3>css基础</h3>
</body>

css 基本样式

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

基本样式

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

css 中颜色表示

单词表示: red、green、blue… 十六进制表示:取值范围 (0～9 && a～f)
RGB 三原色表示:取值范围 (0～255)

CSS3 新增颜色：
RGBA：在 rgb 基础上增加了 Alpha 透明度
alpha 取值介于 0.0 完全透明与 1.0 不透明
HSL：分别代表色相、饱和度、亮度
H:0/360 红色 120 绿色 240 蓝色 (0～360)
HSLA：hsl 基础上加了透明度

css引入方式

内部样式表

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

<style>
div {
width:200px;
height: 400px;
background-color: khaki;
/*总结:<style>标签在文档头部定义内部样式*/
</style>

内联样式表

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
在一个元素上应用一次时。要使用内联样式，你需要
在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

<body>
<div style="width: 200px;height: 400px;background-color: haki;"></div></body>

外部样式表

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

<link rel="stylesheet"href="./indexcss">
<body>
<div>外部样式表</div>
</body>
<style>
@import url('./index.css');
/*注意:@import引用不建议使用*/
</style>
<body>
<div>外部样式表</div>
</body>

css 样式表优先级

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

css 中的冲突、层叠、继承

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

CSS 选择器

1、全局选择器 *
全局通用的样式选择器又叫做通配符选择器
2、标签选择器
HTML 中定义的标签可以作为选择器
3、类选择器 .
小数点
4、Id 选择器 #
Id 名字独一无二
5、群组选择器，
逗号
6、层次选择器

后代选择器空格
子代选择器 >
注：父子关系必须是上下级关系紧挨在一起
7、伪类选择器
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 通过伪类的方式给元素添加一个文本内容
结构型伪类选择器：
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

G111222y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础

1.css指层叠样式表2.样式定义如何显示html元素3.样式通常存储在样式表中4.把样式添加到HTML4.0中是为了解决内容与表现分离的问题5. 外部样式表可以极大提高工作效率6. 外部样式表通常存储在 CSS 文件中7. 多个样式定义可层叠为一个。
复制链接

扫一扫