CSS(一) 字体、文本、选择器、元素显示模式、背景

爱喝水的小鼠

已于 2024-06-17 19:36:02 修改

阅读量605

点赞数 26

分类专栏： CSS+HTML 文章标签： css 前端

于 2024-06-17 10:59:06 首次发布

本文链接：https://blog.csdn.net/qq_44285582/article/details/139717936

版权

CSS+HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、字体与文本属性

1. 字体

font-family：设置文本字体
一般情况下，若字体由多个单词组成，加引号。字体之间用逗号隔开
```
body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; } 
```
font-size：字体大小
通过body可以指定整个页面文字的大小，但是某些标签(标题h)的文字大小需要单独设置(因为存在样式覆盖，具体看CSS的三大特性后续补充对应博客链接)
```
font-size: 15px  注意单位是像素px 
```
font-weight
实际开发中，更常采用数字设置粗细

属性描述
normal 默认值(不加粗的)
bold 定义粗体(加粗的)
100-900 400等同于normal,而700等同于bold,注意数字后面不跟单位
font-style：文字风格
平时很少给文字加斜体，反而要给斜体标签(em,i)改为不倾斜字体
```
font-style:italic   // normal:默认值； italic:设置斜体
```
字体综合属性font
上述文字设置可以综合起来写
```
font: font-style font-weight font-size/line-height font-family;
```
注：font里各属性顺序不能换，各属性之间空格隔开；不需要设置的属性可以不写，但font-size和font-family必须都写，否则font属性不起作用(只写font-size或font-family也会不起作用)

属性	描述
normal	默认值(不加粗的)
bold	定义粗体(加粗的)
100-900	400等同于normal,而700等同于bold,注意数字后面不跟单位

2. 文本

color：文本颜色
预定义的颜色值(blue)/ 十六进制(#ffffff) / rgb(255,0,0)
text-align：文本内容水平对齐方式
```
text-align:center;
```
left：左对齐（默认值）
center：居中对齐
right：右对齐

text-decoration:装饰文本

div{
    text-decoration:underline // 加下划线
    text-decoration:none  // 默认，没有装饰
    text-decoration:line-through  // 加删除线
}

text-indent：文本缩进
用来将段落首行缩进，单位为em。
em是一个相对单位，就是相对于当前1个文字的大小。若文字大小为16px,则1em为缩进16px,若文字大小为20px,则1em缩进20px
line-height：设置行高(行间距)，控制文字行与行之间的距离
上间距 = 下间距 = (行高-文本高度)/2

应用：单行文字垂直居中
设置line-height=height即可，当行高等于盒子高度时，上下间距把文字挤到中间了。
如果行高小于盒子高度，文字会偏上(文字本身高度是不变的)，如果行高大于盒子高度，则文字偏下。

二、选择器

选择器分为基础选择器、复合选择器;
选择器练习网址：CSS Diner
CSS3还新增了其他选择器，后续补充对应博客链接

1. 基础选择器

标签选择器、类选择器、id选择器、通配符选择器

1.1 标签选择器

能快速为页面中同类型的标签统一设置样式

标签名{
    属性1: 属性值1；
    属性2: 属性值2；
    ...
}

1.2 类选择器

差异化选择一个或某几个标签，可使用类选择器

.类名{
    属性1：属性值1；
    ...
}

类名若由多个单词组成，则可使用中横线来连接单词；
一个标签可有多个类名，类名与类名之间用空格分隔；多类名可以节省css代码，也方便统一修改

<style>
   .box {
     width: 100px;
     height: 100px;
   }

   .red {
     background-color: red;
   }

   .green {
     background-color: green;
   }
 </style>
<body>
	<div class="red box">box1</div>
	<div class="green box">box2</div>
	<div class="red box">box3</div>
</body>

1.3 id选择器

HTML元素以id属性设置id，CSS中id选择器以#来定义

#id名{
    属性1：属性值1；
    ...
}

id与类名的区别：

同一个id只能出现在一个标签里，不能两个标签都使用同一个id(id就像是身份证号，不可重复)
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JS搭配使用

1.4 通配符选择器

通配符选择器是给页面中的所有元素都设置。
通配符在特殊情况下会使用,比如：

清除所有元素标签的内外边距
*{
    margin:0;
    padding:0;
}

2. 复合选择器

2.1 后代选择器（重要）

后代包括儿子、孙子等所有后代

语法：元素1 元素2 {样式声明}
注：元素1和元素2可以是任意基础选择器

<style>
/* ul里的所有li标签*/
    ul li {
      color: red;
    }
    /*此处元素1是类选择器，元素2是标签选择器*/
    .taihe li {
        color: blue;
    }
</style>
<body>
    <ul>
        <span>故宫建筑</span>
        <li>午门
            <ol>
                <li>建成于明永乐十八年</li>
                <li>清顺治四年重修</li>
                <li>嘉庆六年又修</li>
            </ol>
        </li>
        <li>角楼</li>
        <li>太和门</li>
        <li>太和殿</li>
    </ul>   
    <ol class="taihe">
        太和殿历史
        <li>建成于明永乐十八年，称奉天殿</li>
        <li>嘉靖四十一年改称黄极殿</li>
        <li>清顺治二年改为太和殿</li>
    </ol>
</body>

2.2 子选择器（重要）

选择元素1里所有的直接后代（元素2），

语法：元素1 > 元素2 {样式声明}

<style>
/*需求：给"大肘子"标红 */
/*只选.hot的直接a元素后代，不管孙子之类的a标签*/
    .hot>a {
        color: red;
    }
</style>

<body>
    <div class="hot">
        <a href="#">大肘子</a>
        <ul>
            <li><a href="#">猪头</a></li>
            <li><a href="#">猪尾巴</a></li>
        </ul>
    </div>
</body>

2.3 并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式。

语法：元素1,元素2 {样式声明}
任何形式的选择器都可以作为并集选择器的一部分

<style>
    div,
    p,
    .china li {
        color: #a0375c;
    }
</style>

<body>
    <div>故宫藏品</div>
    <p>陶瓷</p>
    <span>陶瓷器占约三十五万件</span>
    <ul class="china">
        <li>磁山文化红陶盂</li>
        <li>磁山文化红陶平底碗</li>
        <li>青莲岗文化彩陶钵</li>
    </ul>    
</body>

2.4 伪类选择器

链接伪类选择器
- a:link 选择所有未被访问的链接
- a:visited 选择所有已被访问的链接
- a:hover 选择鼠标指针位于其上的链接
- a:active 选择活动链接(鼠标按下未弹起的链接)
  为了确保生效，按照LVHA的顺序声明（这里其实不太明白,目前只写过下边这种代码，还没遇到过不生效的情况，后续如果有再补充吧）
```
<style>
    a{
        color:gray;
    }
    a:hover{
        color:red; /* 鼠标经过时，由原来的灰色变成红色*/
    }
</style>
```
a链接在浏览器中具有默认样式，所以实际工作中都需要给链接单独指定样式同样是因为CSS的三大特性（后续补充博客链接）

:focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对该表单元素。

<style>
    input:focus {
        background-color: skyblue;
    }
</style>
<body>
    <input type="text">
     <!-- CSS3 input的新特性，autofocus，获取焦点 -->
     <input type="password" autofocus>
</body>

三、元素显示模式

HTML元素可分为块元素、行内元素、行内块元素

1 行内元素

常见行内元素：<span>、<a>、<strong>、<em>、<i>

特点:

一行可以有多个元素
宽高设置不起作用
默认宽度为内容所占的宽度
行内元素可包含文字或其他行内元素

注意：链接a里不可以再包含链接a;a里可以放块级元素，但是转换为块级模型最安全

<style>
    span {
      /*这里宽高设置并不起作用*/
      width: 150px;
      height: 50px;
      background-color: #437795;
      color: white;
    }
</style>
<body>
  <span>猩球崛起</span>
  <span>动作科幻片</span>
    <!-- 网页解析为两个标签  <a></a> <a></a> -->
  <a href="https://www.baidu.cn">百度<a href=""></a></a>
</body>

2 块级元素

h1~h6，div, p, ul ol li 标签都是块级元素

特点
- 一个块级元素独占一行
- 宽高、内外边距都可以设置
- 块级元素看作是一个容器，可以包含任何其他元素
- 默认宽度为父级元素的宽度
注意：文字类的块级标签不能嵌套任何块级元素，比如p、 h1-h6 不能嵌套div或自身等其他块级元素。
```
<style>
    div {
      /* width: 200px; */
      height: 100px;
      background-color: bisque;
    }
</style>
<body>
    
  <div>猩球崛起由鲁伯特执导</div>   
</body>
```

3 行内块元素

比如:input img td标签；

特点：

一行可以有多个元素，但是元素与元素之间排列时会有空白缝隙
宽高、内外边距可以设置
默认宽度为文本内容所占的宽度

<style>
    input {
        width: 200px;
        height: 50px;
        border-color: purple;
    }
</style>
<body>
  <input type="text">
  <input type="text">
</body>

4 模式转换

转为块级元素： display: bolck(常用)
转为行内元素：display: inline
转为行内块元素：display: inline-block(常用)

四. CSS背景

1 背景颜色

背景颜色值

background-color:颜色值
background-color: transparent 背景透明(默认值)

背景图像颜色透明度设置
```
	background-color:rgba(0,0,0,0.3)
```
rgb是颜色。a是alpha透明度，取值范围再0-1。有时候0.3也简写为.3

2. 背景图片

background-image:none|url(图片路径值)

none：无背景图(默认的)
url：使用绝对或相对地址指定背景图像
url里的路径不要加引号

3 背景平铺

background-repeat: repeat | no-repeat|repeat-x|repeat-y

参数值	作用
repeat	背景图像在纵向和横向上平铺(默认的)
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

<style>
    div{
      width: 300px;
      height: 100px;
      background-color: skyblue;
      /* url的路径注意不要加引号 */
      background-image: url(img/logo.png);
    }
 	.repeat-no {
      /* 不平铺 */
      background-repeat: no-repeat;
    }
    .repeat-x {
      /* 横向平铺 */
      background-repeat: repeat-x;
    }
    .repeat-y {
      /* 纵向平铺 */
      background-repeat: repeat-y;
    }
</style>
<body>
 <!-- 背景图片 -->
  <div class="img"></div><br>
  <!-- 背景图片平铺 -->
  <!-- 默认在横向和纵向上平铺 -->
  <!-- no-repeat ,在横向和纵向上都不平铺 -->
  <div class="repeat-no"></div><br>
  <div class="repeat-x"></div><br>
  <div class="repeat-y"></div>
</body>

4 背景图片位置

background-position：参数x，参数y

参数是方位名词：top center bottom left right
- 如果指定的两个值都是方位名词，则两个值前后顺序无关
- 如果只指定了一个方位名词，另一个省略，则第二个默认居中对齐

<style>
    .position{
        background-position:top;
       /*等价于*/  
       background-position:top center;
       /*等价于*/
       background-position:center top;     
       /*但是以上三个不等价于*/
       background-position:center; 
    }
</style>

参数是精确单位
- 若参数值是精确坐标，第一个肯定是x坐标，第二个肯定是y坐标
- 若只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中

参数是混合单位

精确单位和方位名词混合使用，第一个值是x坐标，第二个值的y坐标

<style>
    .coordinate {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      background-image: url(img/logo.png);
      background-repeat: no-repeat;
      /* 坐标 */
      /* 第一个值肯定是x,第二个值是y */
      background-position: 20px 20px;
      /* 第一个是x，另一个默认垂直居中 */
      background-position: 10px;
      /* 等价于 （精确单位与方位名词混合使用）*/
      background-position: 10px center;
      /* 混合使用时，第一个位置是x坐标，第二个值是y坐标 */
      background-position: center 10px;
    }
</style>
<body>
      <div class="coordinate"></div>
</body>

由于样式覆盖，最后的执行的是 background-position: center 10px;所以图标位于水平居中，距离top10px的位置。

5 背景图像固定

background-attachment: scroll | fixed

scroll：背景图像随对象内容滚动
fixed：背景图像固定

6 复合写法

以上属性可合并写在一个属性中，没有特定的书写顺序，一般习惯约定顺序为：

background:transparent url repeat-y fixed top