网页前端学习第三次（HTML)--CSS

Token_w

已于 2022-02-08 16:46:49 修改

阅读量418

点赞数 1

文章标签：前端 html css

于 2022-02-06 21:24:24 首次发布

本文链接：https://blog.csdn.net/weixin_61587867/article/details/122800529

版权

本文介绍了CSS的基础知识，包括用于美化HTML元素样式的CSS概述，以及CSS的三种使用方式：行内样式、内部样式和外部样式。详细讲解了CSS的选择器，如通用选择器、元素选择器、ID选择器、类选择器，以及分组选择器。此外，还涵盖了后代选择器、子元素选择器、相邻兄弟选择器和普通兄弟选择器等组合选择器的概念。通过实例展示了CSS如何应用于网页设计。

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

1.css概述（美化网页）

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

定义：选择器名{

属性名：属性值；

，，，

}

注：1.声明需要使用{}括起来。每个声明以分号结尾

2.一行建议一个声明

3.如果样式的属性值由多个单词组成，则用引号引起来

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>

<h3>Look! Styles and colors</h3>

<div style="letter-spacing:12px;">Manipulate Text</div>

<div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div>

<div style="color:#000000;">and more...</div>

</div>

</body>
</html>