CSS初入门1

最新推荐文章于 2024-06-03 23:30:08 发布

烤翅吐司沙拉

最新推荐文章于 2024-06-03 23:30:08 发布

阅读量72

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45666464/article/details/118926246

版权

这篇博客详细介绍了CSS的学习目标，包括选择器的使用（标签选择器、类选择器、ID选择器和通配符选择器）、字体属性（如字体大小、字体家族、字体样式等）和文本属性（颜色、对齐、缩进等）。此外，还讲解了CSS的引入方式（内部样式表、行内样式表和外部样式表）以及Chrome调试工具的使用技巧，帮助开发者更有效地进行样式调整和问题排查。

摘要由CSDN通过智能技术生成

学习目标

学习CSS并通过CSS对html的样式修改

学习内容

CSS选择器
CSS设置字体样式
CSS设置文本属性
CSS引入方式
Chrome调试工具

一、CSS选择器

1.选择器作用

根据不同需求把不同的标签选出来是选择器的作用，选择标签用的。

2.标签选择器

指用HTML标签名称作为选择器，按标签名称分类，为页面某一类标签指定CSS样式

<style>
    <!--标签选择器语法-->
    标签名{
        属性1: 属性值1;
        属性2: 属性值2;
        属性3: 属性值3;
    }
</style>

3.类选择器

如果想要单独选一个或某几个标签，可以使用类选择器

<!--类选择器-->
<style>
    .shuxing{
        color: pink;<!--属性: 属性值;-->
    }
</style>
.
.
.
<p class="shuxing">粉色</p>

可以使用多类名方式来修改样式

<!--多类名使用方式例子-->
<style>
    .yanse{
        color: pink;
    }
    .font20{
        font-size: 20px;
    }
</style>
.
.
    <div class="yanse font20">粉色</div>

4.id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器用 "#" 定义

<!--id选择器语法-->
#id名{
    属性1: 属性值;
    ...
}

<div id="id名">xxxx</div>

注意，id选择器不能重复使用。

5.通配符选择器

在CSS中，通配符选择器使用 " * " 定义，表示选取页面中的所有元素

<!--通配符选择器语法-->

*{
    属性1: 属性值1;
    ...
}

二、CSS字体属性

1.字体复合属性

<i>使用font属性时，必须按照语法格式中的顺序来写，且各个属性间以空格隔开；

<ii>不需要设置的属性可以忽略，但必须保留font-size和font-family

<!--字体复合属性-->
div{
    font: font-style font-weight font-size/line-height font-family
}

字体属性总结

属性	表示	注意点
font-size	字号	通常用的单位是px像素，必须带单位
font-family	字体	按实际情况来写字体
font-weight	字体粗细	加粗 700 或 bold；不加粗是 400 或 normal，不跟单位
font-style	字体样式	斜体是 italic ，不倾斜是 normal ，常用normal
font	字体连写	1.字体连写是有顺序的；2.字号和字体必须同时出现

三、CSS文本属性

文本属性总结

属性	表示	注意点
color	文本颜色	常用十六进制 eg.#fff
text-align	文本对齐	设定文本水平对齐方式
text-indent	文本缩进	常用于段落首行缩进两个字符 eg. text-indent: 2em;
text-decoration	文本修饰	添加下划线 underline；取消下划线 none
line-height	行高	控制行与行之间的距离

四、CSS引入方式

1.内部样式表

写到html页面内部，是将所有的css代码抽取出来，单独放到<style>标签中

<style>标签一般放到<head>标签中

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

2.行内样式表

在元素标签内部的style属性中设定的css样式

<div style="color: red; font-size: 12px;">我带你们打</div>

3.外部样式表

样式单独写到css文件中，然后把css文件引入到HTML页面使用

<i>新建一个css文件，把所有css代码放入

<ii>在HTML界面中，使用<link>标签引入css文件

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

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。