「Web前端开发」CSS入门篇（上）

最新推荐文章于 2024-05-13 15:14:44 发布

P1NKN1N1

最新推荐文章于 2024-05-13 15:14:44 发布

阅读量323

点赞数

分类专栏： Web前端开发文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_45825645/article/details/123120812

版权

7 篇文章 0 订阅

订阅专栏

本篇分为五个部分：CSS层叠样式表介绍、基础选择器、字体和文本样式、谷歌调试工具和拓展

本文主要简单介绍CSS层叠样式表、四种基础选择器。

一、CSS

CSS决定了网页样式是否美观，写在style标签中，而style标签一般写在head标签里，title标签下面；

CSS引入方式有：

内嵌式：写在style标签中，style标签虽然可以写在页面的任何位置，但通常约定写在head当中；
外联式：CSS在一个单独的CSS文件中，需要通过link方式在网页中引入（写在title下面<link rel="..." href="..."> href值为外部资源地址，这里是css的地址；rel定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet）
行内式：CSS写在标签的style属性中，比如<div style="color:green;font-size:...pix">

选择器用于选择你想要的元素，通过选择器选中然后对元素样式进行修改

1.标签选择器：标签名{CSS属性名:属性值;}

p{color:red;}

通过标签名，找到页面中所有这类标签，设置样式

特点：选择的是一类标签，而不是单独一个

2.类选择器：.类名{CSS属性名:属性值;}

.one{color:red;}

<body>

<div class="one">类选择器</div>

</body>

通过类名，找到页面中所有带有这个类名的标签设置样式

Tip：

3.id选择器：#id属性值{CSS属性名:属性值;}

#two{color:blue;}

<div id="two">id选择器</div>

Tip：

4.通配符选择器：*{CSS属性名：属性值;}

选择页面中所有样式设置，一般用来清除标签中默认的margin和padding

——————

本文到这里就结束啦，下文接着是字体和文本样式、谷歌调试工具和相关的拓展

关注