HTML基础学习02_CSS基础属性

2022-01-07  本文已影响0人  小虾米的时光机

内容概述

一 、 文本属性

1.text-decoration

设置文本的修饰外观 （下划线、上划线、 贯穿性 、删除线 或者 闪烁

2.text-transform 大小写转换

3. text-indent 首行缩进

4.text-align 文本对齐方式

5. font-size 设置字体大小

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n42" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit; background-repeat: inherit;">/* <absolute-size>，绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size>，相对大小值 */
font-size: larger;
font-size: smaller;

/* <length>，长度值 */
font-size: 12px;
font-size: 0.8em;

/* <percentage>，百分比值 */
font-size: 80%;

font-size: inherit;</pre>

6. font-family 设置字体 Font-weight 文本粗细

Font-weight :字体的粗细程度 一些字体只提供 normal 和 bold 两种值 也可跟 数字 默认 400

注意 ： font-weight: 700; 后面不可跟px

7. font-style

8.font-variant 所有小写字母变大写字母 按小写字母显示

[图片上传失败...(image-4ebd26-1641522383945)]

9.line-height 行高

10 字体的缩写

font-style : font-variant: 字体变化 font-weight: 字体粗细 font-size:/ line-height: font-family:

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体

简写的时候需要注意：

三 、 选择器

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n434" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选中div 底下的span 包括直接和间接 /
/ div span{
color: red;
} /
/ 后代选择器 3 4 5/
/ div span{
color: red;
} */

/* 前一个元素的直接子代节点 3 4 5 /
/ div > span{
color: red;
} */

/* 兄弟节点 具有共同父节点 div 后紧挨着span 7 /
/ div + span{
color: red;
} */

/* 兄弟全节点 后节点在前一个节点后面的 任意位置 78/
/ div ~ span{
color: red;
} */

/* 交集 234568 /
/ div.one{
color: red;
} */

/* 后代选择器 6 /
/ div .one{
color: red;
} */

/* 并集选择器 ，隔开 234568 79 下面只要符合其中一个就满足条件 */
div, .one , [title="test"]{
color: red;
}

</style>
</head>
<body>
<span>文字内容1</span>
<div class="one"> 文字内容2
<span>
文字内容3
<p>
文字内容4
</p>
</span>

<span>文字内容5</span>
<div class="one">文字内容6</div>
<span>内容8</span>
</div>
<span class="one">文字内容7</span>
<a href="" tabindex="-1"></a>
<p title="test">内容9</p>
</body>
</html></pre>

四、 伪类 （pseudo-class） 和伪元素

1. 常见的伪类

 <h2 id="title1">标题1</h2>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>

 <h2 id="title2">标题2</h2>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>



 <h2 id="title3">标题3</h2>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>

</body>
</html></pre>

五、 Emment元素

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n260" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>


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


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

<div id="main">
<div class="box"></div>
<p class="p1"></p>
<span class="title"></span>
</div>
<div class="footer"></div>

<div id="header" class="box box2" title="hhah哈ha"></div>
</body>

</html>

</pre>

上一篇 下一篇

猜你喜欢

热点阅读