CSS（一）

最新推荐文章于 2024-04-12 09:05:52 发布

错言语

最新推荐文章于 2024-04-12 09:05:52 发布

阅读量129

点赞数

文章标签： css css3 html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/qq_46150052/article/details/120954052

版权

笔记同时被 2 个专栏收录

31 篇文章

订阅专栏

5 篇文章

订阅专栏

CSS（一）

CSS作用

CSS 的主要使用场景就是美化网页,布局页面的.

HTML 的局限性

HTML只关注内容的语义

CSS-网页的美容师

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.是一种标记语言，主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

CSS 语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

在这里插入图片描述

<head>
 <style>
 h4 {
 color: blue;
 font-size: 100px;
 }
 </style>
</head>

CSS 基础选择器

CSS 选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

选择器分类

选择器分为基础选择器和复合选择器两个大类

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

标签名{
 属性1: 属性值1; 
 属性2: 属性值2; 
 属性3: 属性值3; 
 ...
}

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

.类名 {
 属性1: 属性值1; 
 ...
}

**记忆口诀：**样式点定义，结构类调用

多类名使用方式

<div class="red font20">亚瑟</div>

id 选择器

#nav {
 color:red;
 }

通配符选择器

* {
 margin: 0;
 padding: 0;
}

基础选择器总结

在这里插入图片描述

CSS 字体属性

字体系列font-family

p { font-family:"微软雅黑";} 
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

字体大小font-size

p { 
 font-size: 20px; 
}

字体粗细font-weight

p { 
 font-weight: bold;
}

在这里插入图片描述

文字样式font-style

p { 
 font-style: normal;
}

在这里插入图片描述

字体复合属性font

body { 
 font: font-style font-weight font-size/line-height font-family; }

属性不能更换顺序，并且各个属性间以空格隔开,但必须保留 font-size 和 font-family 属性

字体总结

在这里插入图片描述

CSS 文本属性

文本颜色color

color 属性用于定义文本的颜色。

div { 
 color: red;
}

在这里插入图片描述

对齐文本text-align

text-align 属性用于设置元素内文本内容的水平对齐方式。

 text-align: center;

在这里插入图片描述

装饰文本text-decoration

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

text-decoration：underline；

在这里插入图片描述

文本缩进text-indent

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

text-indent: 10px;
text-indent: 2em;//1 个文字的大小

行间距line-height

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

line-height: 26px;

文本属性总结

在这里插入图片描述

CSS 引入方式

行内样式表（行内式）

<div style="color: red; font-size: 12px;">哒哒哒</div>

内部样式表（嵌入式）

<style>
 div {
 color: red;
 font-size: 12px;
 }
</style>

外部样式表（链接式）

1.新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

在 HTML 页面中，使用<link> 标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

在这里插入图片描述

CSS 引入方式总结

在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。