CSS样式+选择器+字体样式

最新推荐文章于 2022-12-19 17:00:45 发布

Mode Cheng

最新推荐文章于 2022-12-19 17:00:45 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS 选择器字体样式

本文链接：https://blog.youkuaiyun.com/weixin_43885080/article/details/84671798

8 篇文章

订阅专栏

本文详细介绍了CSS的三种应用方式：行内样式、内部样式和外部样式。解析了不同选择器的使用，包括标签、类、ID、后代和交集选择器，并讲解了字体样式的设置方法，如字体加粗、文本对齐、斜体等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接将style属性写在标签里面，不建议使用

<p style="display:inline-block;width:200px"></p>

将style标签写在head标签里面

 <style>
        div{
            display: inline-block;
            width:200px;
        }

    </style>

<head>
<link rel="stylesheet" href="main.css"/>
</head>

Main.css

@charset "utf-8"

选中所有的同类标签

div{}

通过 . 语法来选择

.div{}

<div class="div"></div>

通过#语法来选择

#nav{}

<div id="div"></div>

通过中间空格来选择控制所有后代，如果用>隔开，那么就只影响直系。

div>span

<div>
	<span></span>
</div>

同时满足所有条件,不常用

div.c1{}
<div>
	<span class="c1"></span>		√
	<span class="c1"></span>	    √
	<span class="c2"></span>	    ×
</div>

有满足的条件即可

#img1,.img{}

<div id="img1"></div>	√
<div class="img1"></div>	√
<div class="img1"></div>	√

字体样式

谷歌浏览器默认16号字体，最小显示12号字体

代码	用法
font-weight:bold	字体加粗
text-align: center	文本水平居中
font-style: italic	斜体
line-height:10px	通过行高进行垂直居中
letter-spacing: 10px	字符间距
text-decoration: underline0	文本修饰下划线
text-decoration: overline	上划线
text-decoration:line-through;	中划线
text-decoration: none	去掉线
text-indent:	文本缩进
-webkit-text-stroke: 1px red	文本描边
text-shadow: 10px 5px 1px black(右移动10;下移动5;字体清晰度-越小越清晰;阴影颜色)	文字阴影
border:1px soild red	边框粗细实心颜色