CSS简介以及选择器

最新推荐文章于 2024-08-17 22:24:13 发布

网安ZhCL

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量63

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_52180947/article/details/132267016

版权

本文详细介绍了CSS选择器的各种类型，包括名称选择器、属性选择器、类型选择器等，以及它们在HTML中的应用示例，如后代选择器、子元素选择器和伪类等。同时涵盖了字体、文本样式、列表和表格的CSS样式设置。

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

这里写目录标题

css选择器

css选择器

基本用法：
通过HTML中<style>标签定义在head元数据；
1.什么是css
指的是层叠样式表
2.css作用
通过指定的样式定义如何来显示HTML元素，标签，通常这样的样式就会保存到css文件中，.css文件
HTML4.0后，可以实现引用外部样式表，就是HTML可以和css文件分离
3. 多个样式定义的样式表可以层叠为一
4. 如何使用样式表
通过各种的选择器和css语法来使用
语法：{属性名称：属性的值}

名称选择器

标签名称加大括号

<html>

<head>
<style type="text/css">
h1 {color: red}
p {background-color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>

</html>

属性选择器

#属性名称{}
属性名称为id的内容

<html>

<head>
<style type="text/css">
#123 {color: red}
p {background-color: blue}
</style>
</head>

<body>
<h1 id="123">header 1</h1>
<p>A paragraph.</p>
</body>

</html>

类型选择器

.类名{}

<html>

<head>
<style type="text/css">
.123 {color: red}

</style>
</head>

<body>
<h1 class="123">header 1</h1>

</body>

</html>

选择器分组

多个标签可以用逗号隔开
h1，p{}

后代选择器

标签嵌套之后使用，依次写

<ul>
<li><p>可乐</p></li>
<li>咖啡</li>
<li>雪碧</li>
</ul>

ul li p{ 
color：red；
}

子元素选择器

h1 > strong{color:red}

<h1>hello<strong>red</strong></h1>

相邻兄弟选择器

伪类

<html>

<head>
<style type="text/css">
a:link{color:red}
a:visted{color:#3d3d3d}
a:hover{color:aqua}
a:active{clolor:greenyellow}

</style>
</head>

<body>
<a href="http://www.w3school.com.cn/">Visit W3School</a>	

</body>

</html>

伪元素

<html>

<head>
<style type="text/css">
p:first-line{
	color:red;
}

</style>
</head>

<body>

<p>你好你啊哈哦积极杀敌</p>
</body>

</html>

字体

字体font
字体大小font-size
字体样式font-style

文本

宽度width：
对齐方式text-align：center/right/left
缩进text-inden:10px

轮廓

边框
border：red dashed 2px;
轮廓
outline： green dotted 5px;

列表

list-style-type
none 处理无序列表，去掉点
disc默认值就是实心圆点
circle空心圆点

ul{list-style-type: disc}

表格

table,th,td{border: green 10px;}

网安ZhCL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS简介以及选择器

通过指定的样式定义如何来显示HTML元素，标签，通常这样的样式就会保存到css文件中，.css文件。HTML4.0后，可以实现引用外部样式表，就是HTML可以和css文件分离。对齐方式text-align：center/right/left。通过HTML中<style>标签定义在head元数据；3. 多个样式定义的样式表可以层叠为一。通过各种的选择器和css语法来使用。语法：{属性名称：属性的值}字体样式font-style。disc默认值就是实心圆点。标签嵌套之后使用，依次写。属性名称为id的内容。
复制链接

扫一扫