CSS常用属性

用言语xxq

于 2022-10-31 17:04:45 发布

阅读量596

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_52843224/article/details/127593636

版权

2.2 复合选择器：把多种基础选择器综合运用起来

1.引入css的三种样式

内联样式
- 内联式是把style代码嵌入到某个标签中。
内部样式
- 内部样式是把style代码放在head标签体中。
外部样式
- 外部样式是把CSS写到一个css文件中，然后通过link标签引入。
实际开发中主要使用外部样式，因为这样可以把html文件和css文件分开，可以实现css代码的复用，而且阅读方便。

2.选择器的种类

2.1 基础选择器：单个选择器构成的。

标签选择器

<!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>
        /*标签选择器*/
        p {
            color: red;
        }
    </style>
</head>
<body>
<p>安州牧</p>
</body>
</html>

特点：这种选择器可以快速选出同一类型的标签，但是不能差异化选择。

类选择器

<!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>
        /*类选择器*/
        .p1 {
            color: hotpink;
        }
    </style>
</head>
<body>
<p class="p1">安州牧</p>
<p>开皇盛世</p>
</body>
</html>

一个标签可以使用多个类选择器，多个标签也可以使用一个类选择器

特点：这种选择器可以差异化表示标签，可以让多个不同的标签都使用同一个标签。

id选择器

<!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>
        #p {
            color: red;
        }
    </style>
</head>
<body>
<p id="p">安州牧</p>
<p>开皇盛世</p>
</body>
</html>

id是唯一的，不能被多个标签使用。也就是id="p"只能出现一次，这是和类选择器最大的区别。

通配符选择器

通常用于清除浏览器自带的默认样式。

<!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>
       * {
        color: red;
       }
    </style>
</head>
<body>
<p>安州牧</p>
<div>
    <span>开皇盛世</span>
</div>
</body>
</html>

通配符选择器会选择所有的标签。因此字体颜色都会变为红色。

选择器小结：

	作用	特点
标签选择器	能选出所有相同标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求使用，最灵活
id选择器	能选出一个标签	同一个id在html中只能出现一次
通配符选择器	选择所有标签	特殊情况下使用

2.2 复合选择器：把多种基础选择器综合运用起来

2.2.1 后代选择器

格式：元素1 元素2 {样式声明}
元素1和元素2中间有一个空格。
元素1是父级，元素2是子级。只对子级生效，不对父级生效。
元素2也可以是孙子级。

<!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>
      ul li {
        color: red;
      }
    </style>
</head>
<body>
    <ul>
        <li>唐三藏</li>
        <p>猪八戒</p>
    </ul>
</body>
</html>

2.2.2 子选择器

格式：元素1 > 元素2 {样式声明}
只选儿子元素，不选孙子元素

2.2.3 并集选择器

格式：元素1，元素2 {样式声明}
任何基础选择器都可以使用并集选择器，表示同时选中元素1和元素2

2.2.4 伪类选择器

伪类链接选择器
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
：force伪类选择器
选取获取焦点的input表单元素

选择器	作用	注意事项
后代选择器	选择后代元素	可以是孙子元素
子选择器	选择子元素	只能是儿子元素
并集选择器	可以一次选择多个元素	更好的代码复用
链接伪类选择器	链接的不同状态	重点掌握 a:hover
:forcuse伪类选择器		重点掌握 input:focus

3.常用元素属性

3.1 字体相关

body{
    /* 设置字体样式，不推荐使用中文 */
    font-family: '微软雅黑';
    /* 设置字体大小，Chrome默认是16px */
    font-size: 24px;
    /* 设置字体粗细，100-700，normal为400，bold为700 */
    font-weight: 100;
    /* 设置文字样式 italic为倾斜，normal为取消倾斜 */
    font-style: italic;
    font-style: normal;
}

3.2 文本属性

body{
    /* color的值可以为三种：单词 、16进制、 rgb方式 */
    color: red;
    color: #f00;
    color: rgb(255,0,0);
    
    /* text-align设置文本的对其方式，left左对齐，center居中对齐，right右对齐 */
    text-align: center;

    /* text-decoration为文本装饰：常用取值如下
        underline 下划线. [常用]
        none 啥都没有. 可以给 a 标签去掉下划线. 
        overline 上划线. [不常用]
        line-through 删除线 [不常用]
    */
    text-decoration: underline;

    /* text-indent为文本缩进，单位可以使用px或em，1个em为当前元素文字的大小，值也可以为负 */
    text-indent: 2em;

    /* line-height为行高，行高 = 上边距+下边距+字体大小  当行高与元素高度相等时，就可以实现文字垂直居中*/
    line-height: 100px;
}

3.3 背景颜色

body{
    /* 浏览器默认背景颜色是transparent (透明)的，如果要改背景可以设置background-color属性*/
    background-color: red;

    /* url中填写图片的路径，可以是绝对路径，也可以是相对路径 url不能遗漏 */
    background-image: url();

    /*背景平铺：background-repeat: [平铺方式]
        repeat: 平铺
        no-repeat: 不平铺
        repeat-x: 水平平铺
        repeat-y: 垂直平铺 
     */
     background-repeat: no-repeat;

    /* 背景位置：background-position: x y  
        修改图片的位置，参数有三种风格:
            1. 方位名词: (top, left, right, bottom)
            2. 精确单位: 坐标或者百分比(以左上角为原点)
            3. 混合单位: 同时包含方位名词和精确单位
    */
    background-position: top;

    /* 背景尺寸 background-size
        可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
        也可以填百分比: 按照父元素的尺寸设置. 
        cover: 把背景图像完全覆盖背景区域
        contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.
    */
    background-size:contain;

    /* 通过 border-radius 使边框带圆角效果.
        当border-radius的值为正方形宽度的一半时，正方形就变成了圆形
     */
    border-radius: 15px;
}

4. 元素显示模式

4.1块级元素

h1 - h6

p

div

ul

ol

li

....

特点:

独占一行
高度, 宽度, 内外边距, 行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子), 里面可以放行内和块级元素.

4.2 行内元素

a

strong

b

em

i

del

s

ins

u

span

...

特点：

不独占一行，一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素

4.3 行内元素和块级元素的区别

块级元素独占一行, 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高.
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.

4.4 改变显示模式

使用 display 属性可以修改元素的显示模式：可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素。

display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素

5.盒模型

每一个html元素就相当于一个矩形的盒子，这个盒子由四部分构成，由内到外顺序为

内容 content
块级元素设置的宽度和高度为内容的宽度和高度，不包括下面三个
内边距 padding
padding 设置内容和边框之间的距离,默认内容是顶着边框来放置的. 用 padding 来控制这个距离
边框 border
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color
边框会撑大盒子，通过 box-sizing:border-box可以修改浏览器的行为, 使边框不再撑大盒子
外边距 margin
控制盒子和盒子之间的距离

6.弹性布局

flex 是 flexible box 的缩写. 意思为 "弹性盒子".
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

<!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 {
      width:100%;
      height:150px;
      background-color:red;
      }
      div>span {
      background-color:green;
      width:100px;
      }
     </style>
</head>
<body>
  <div>
    <span>大师兄</span>
    <span>二师兄</span>
    <span>三师弟</span>
   </div>
</body>
</html>

此时页面显示地效果为

给div加上display:flex后

此时看到, span 有了高度, 不再是 "行内元素了" ，再给 div 加上 justify-content: space-around; 此时效果为

此时可以看到这些 span 已经能够水平隔开了. 把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在右侧显示了.

6.1 justify-content

这个属性设置的是水平方向

<!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 {
      width: 100%;
      height: 150px;
      background-color: red;
      display: flex;
      }
      div span {
      width: 100px;
      height: 100px;
      background-color: green;
       }
     </style>
</head>
<body>
  <div>
    <span>大师兄</span>
    <span>二师兄</span>
    <span>三师弟</span>
   </div>
</body>
</html>

设置 justify-content: space-between; 会先两边元素贴近边缘, 再平分剩余空间.