CSS笔记_simsun-italic-CSDN博客

本文链接：https://blog.csdn.net/m0_53450038/article/details/125935747

CSS笔记

什么是CSS？

CSS 指的是层叠样式表(Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中
也称级联样式表。

1.CSS基础语法

选择器{属性1：值1 属性2：值2 属性3：值3}
单位：px：像素(pixel)、%->百分比
基本样式：width、height、background-color

h1 {
	color:white;
	text-align:center;
}

内联样式与内部样式

内联(行内、行间)样式：

在html标签上添加style属性来实现的
内部样式：

在style标签内添加的样式，可以复用的代码

外部CSS

外部样式在HTML页面< head >部分内的< link >元素中定义：

<!DOCTYPE html>
<html lang="en">
<head>
		......	
  	
  	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1>
      This is a heading
  </h1>
</body>
</html>

通过@import方式引入外部样式(不建议使用)

link与@import区别引发的CSS渲染杂谈

<head>
  <style>
    @import url('mystyle.css');
  </style>
</head>

内部CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 < style > 元素中进行定义。

<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

行内CSS

行内样式(也称内联样式)可用于为单个元素应用唯一的样式。

如需使用内联样式，需要将style属性添加到相关元素，style可包含任何CSS属性

<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

2.CSS颜色表示法

单词表示法

red blue green yellow magenta…
十六进制表示法

#000000 ~ #ffffff
RGB三原色表示法

rgb(255,255,255);

取值范围：0~255

3.CSS背景样式

background-color：背景颜色
background-image：背景图片

url(背景地址) 默认水平垂直铺满整个背景图
background-repeat：背景图片的平铺方式

repeat-x 水平方向上重复图像

repeat-y 垂直方向上重复图像

默认值：repeat(x,y)

no-repeat 都不平铺
background-position：背景图片的位置

可设置x y值：数值(px、%)或单词

x ：left、center、right

y ：top、center、bottom
background-attachment：背景图随滚动条的移动方式

scroll：默认值(背景位置相对于当前元素固定偏移)

fixed：背景位置按照浏览器窗口位置进行偏移

    <style>
        div {
            width: 500px;
            height: 400px;
            background-color: red;
            /* 背景图片默认填充整个区域 */
            background-image: url(../images/up.png);
            background-repeat: no-repeat;
            background-position: left top;
            background-attachment: fixed;
        }
    </style>

背景实现视觉差的练习

<!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>
        #div1 {
            width:1400px;
            height:800px;
            background-image:url('../../images/image1.jpg');
            background-attachment:fixed;
        }
        #div2 {
            width:1400px;
            height:800px;
            background-image:url('../../images/up.png');
            background-attachment:fixed;
        }
        #div3 {
            width:1400px;
            height:800px;
            background-image:url('../../images/down.png');
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

4.边框样式

border-style：边框的样式
border-width：边框的大小
border-color：边框的颜色

注：针对某一条边进行单独设置

    <style>
        div {
            width:300px;
            height:300px;
            /* 实线：solid;虚线：dashed;点线：dotted */
            border-style:solid;
            border-width:30px;
            border-color:aqua;
            /* 针对某一边框设置 */
            border-top-style:dashed;
            border-top-width:10px;
        }
    </style>

边框实现三角形

透明颜色 transparent

    <style>
        body {
            background-color: black;
        }
        div {
            width:0px;
            height:0px;
            border-top-style:solid;
            border-top-color:transparent;
            border-top-width:30px;          
            border-bottom-style:solid;
            border-bottom-color:green;
            border-bottom-width:30px;
            border-left-style:solid;
            border-left-color:transparent;
            border-left-width:30px;
            border-right-style:solid;
            border-right-color:transparent;
            border-right-width:30px;
        }
    </style>

5.文字样式

在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

通用字体族	字体名称实例
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

字体类型

font-family：字体类型

在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

控制面板中可查看计算机内的字体

**注释：**如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。

英文字体：Arial，‘Times New Roman’

中文字体：微软雅黑，宋体…(‘Microsoft YaHei’，SimSun)

    <style>
        div {
            font-family:'Times New Roman',SimSun,'Mincrosoft YaHei';
        }
    </style>

字体大小与粗细

默认16px
font-size 属性设置文本的大小。

在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。

请始终使用正确的 HTML 标签，例如 < h1> - < h6 > 用于标题，而 < p > 仅用于段落。

font-size 值可以是绝对或相对大小。

绝对尺寸：

将文本设置为指定大小
不允许用户在所有浏览器中更改文本大小（可访问性不佳）
当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小

用像素设置字体大小

p {
	font-size:12px;
}

用em设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。W3C 建议使用 em 尺寸单位。1em 等于当前字体大小。浏览器中的默认文本大小为 16px。

因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

h1 {
	font-size:2.5em;/*40px = 2.5em * 16
}

font-weight：字体粗细

值：正常（normal) 加粗（bold) 或数值（100_{500:显示正常，600}900加粗）

font-style：字体样式

值：normal（正常）italic（斜体）oblique(斜体)

italic：带有倾斜属性的字体才能设置倾斜操作

oblique：没有倾斜属性的字体也可以设置倾斜操作

6.CSS段落样式

文本修饰与文本大小写

text-decoration：文本装饰

下划线：underline

删除线：line-through

上划线：overline

不添加任何装饰：none

        #p {
            /* text-decoration:underline; */
            /* text-decoration:overline; */
            text-decoration:line-through;
        }

text-transform：文本大小写

针对英文段落

小写：lowercase

大写：uppercase

针对首字符的大写：capitalize

文本缩进

text-indent：文本缩进

首行缩进2字符要求字体的大小的两倍

text-indent:32px (默认16px)
使用em为缩进的单位，自动根据字体像素计算需要缩进的像素

文本对齐

text-align

默认左对齐
- left：靠左对齐
- right：靠右对齐
- center：居中对齐
- justify：两端点对齐

<style>
  #p {
    /* text-decoration:underline; */
    /* text-decoration:overline; */
    /* text-decoration:line-through; */
    text-decoration: underline;
    text-indent:2em;
    text-align:justify;
    text-transform: lowercase;
  }
</style>

文本的行高

line-height：定义行高：一行文字的高度+上边距和下边距

默认值：不是固定值，根据当前字体大小变化
取值：
1. number(px)
2. scale(比例值，与文字大小成比例)

文本间距

letter-spacing：定义字间距

word-spacing：词之间的间距（只针对英文）

英文折行

强制折行：(针对英文)

word-break:break-all(非常强烈的折行)

word-wrap:break-word(较弱的折行，会产生空白区域，另起一行折行)

<style>
  #div1 {
    width:300px;
    height:300px;
    border:solid 1px brown;
    word-break:break-all;
  }
</style>

7.CSS复合样式

一个CSS属性只控制一种样式时称为单一样式
一个CSS属性控制多种样式时为复合样式
符合的写法是通过空格的方式实现的

background、border、font等都可以作为复合样式

复合样式有的需要注意顺序，例如font属性，background、border不需要注意书写顺序

    <style>
        div {
            width: 300px;
            height: 500px;
            background: red url(../images/up.png) no-repeat center center;
            border: 2px black solid;
        }
    </style>

font至少要有两个值size与family

weight style size family

weight style size/line-height family

font: bold italic 30px SimSun;
/* font: italic bold 30px SimSun; */
/* font: bold 30px SimSun italic; 写在size和family后的值失效 */
/* font: bold italic 30px/100px SimSun; */

注意不要混写，如果混写注意先写复合样式再写单一样式这样样式才不会被覆盖

background: url(../images/up.png) no-repeat center center;
background-color: red;

8.CSS选择器

id选择器

CSS：#elem html：id=“elem”

注意在一个页面中id值是唯一的不能出现多次
命名规范：字母、下划线、数字(不能以数字开头)
命名方式：驼峰式、下划线式、短线式

vscode快捷键：元素+#+id+tab

<head>
  <style>
    #div1 {
      background-color:red;
    }
    #div2 {
      background-color:blue;
    }
  </style>
</head>
<body>
  <div id="div1">这是一个块</div>
  <div id="div2">这是一个块</div>
</body>

CSS命名规范

CSS命名规则整理

class选择器

CSS：.elem html：class=“elem”

class选择器可以复用
可以添加多个class样式
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
标签+类的写法

vscode快捷键：元素+.+class+tab

<head>
  <style>
    .box{
      background-color: red;
    }
    .content {
      font: 30px Simsun;
    }
    /* p.box 标签+类 表示只针对p标签 */
    p.box {
      font-style: italic;
    }
  </style>
</head>
<body>
    <div class="box">这是一个块</div>
    <div class="box">这是另一个块</div>
    <p class="box content" >这是一个段落</p>
</body>

标签选择器(Tag选择器)

CSS：标签名{} html：<标签名>

使用场景：
1. 去掉默认样式
2. 复杂的选择器中例如层次选择器

<heda>
  <style>
    div {
      background: red;
    }
  </style>
</heda>
<body>
  <div>
  </div>
</body>

群组选择器

可以通过逗号的方式，给不同多个选择器添加统一的CSS样式

<head>
  <style>
    .title,#text,div {
      background-color: red;
      }
	</style>
</head>
<body>
    <h1 class="title">这是一个标题</h1>
    <p id="text">这一段文字</p>
    <div>这是一个块</div>
</body>

通配选择器

CSS：*{ }

给所有标签添加样式
尽量避免使用，一般用去掉所有标签样式

层次选择器

后代：M N 选择层下所有的N添加属性
父子：M > N 只选择M层下一层所有的N添加属性
兄弟：M ~ N 选择M所在一行的下的所有的N标签添加属性
相邻：M + N 选择与M向下相邻的一个N标签添加属性

<style>
	#order > li {
  border:red 1px solid;
  }
</style>
<body>
  <ol id="order">
    <li>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </li>
    <li>

    </li>
    <li>

    </li>
  </ol>
</body>

属性选择器

选择器	说明
M[atter]	M元素选择指定为atter属性的集合
M[atter=value]	M元素选择指定为atter属性和指定value值的集合
M[atter*=value]	M元素选择指定为atter属性并且包含值为value的集合
M[atter^=value]	M元素选择指定为atter属性并且起始值为value的集合
M[atter$=value]	M元素选择指定为atter属性并且结束值为value的集合
M[atter1] [atter2]	M元素选择满足多个属性的集合

div[class][id] {
background-color: red;
}

<div>aaaaaa</div>
<div class="box" id="elem">bbbbbb</div>
<div class="search">cccccc</div>
<div class="search-button">dddddd</div>
<div class="button-search">eeeeee</div>

CSS伪类选择器

CSS伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。

M：伪类{}

:link 代表访问前的样式 (只能添加到a标签)

:visited 访问后的样式 (只能添加到a标签)

:hover 鼠标移入时的样式

:active 鼠标按下时的样式

注：
1. link与visited只能给a标签添加，hover和active可以给所有元素添加
2. 如果四个伪类都生效，一定要注意顺序：L V H A
3. 一般网站只这样设置：a{}、a:hover{}

div {
width:300px;
height:300px;
background:red;
}
div:hover {
background:blue ;
}
div:active {
background:green;
}

通过伪类给元素添加一段文本内容，使用content属性

:after {} 在元素后插入

:before {} 在元素前插入

div:after {
	content:"world";/* helloworld */
}
<div>
  hello
</div>

对表单元素的伪类选择器

:checked {} 当元素具备checked属性时拥有该样式

:disabled {} 当元素具备disabled属性时拥有该样式

:focus {} 获取光标时拥有该样式

:checked {
width:100px;
height:100px;
}
:focus {
background-color:red;
}

<form action="">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="text">
</form>

结构型伪类选择器

:nth-of-type()(与类型相关)、:nth-child()(与类型无关)

值：数值，角标从1开始，1表示第一项，2表示第二项

也可直接写n，表示从0到无穷大

:first-of-type 选择一个相同元素集合中的第一个

:last-of-type 选择相同元素中的最后一个

:only-of-type 同一集合中只有一个元素时有效

9.CSS样式继承

文字相关的样式可以被继承
布局相关的样式默认不被继承，可以设置属性的inherit值继承样式。

<style>
  div {
    width:600px;
    height:500px;
    border:1px solid red;
    font-size:30px;
    color: red;
  }
  p {
    border:inherit;
  }
</style>
<body>
  <div>
    <p>这是一段文字</p>
  </div>
</body>

10.CSS的优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，不见出现重复设置样式

内部样式与外部样式

两者优先级相同，后写入的优先级较高

<style>
  div {
    color: blue;
  }
</style>
<link rel="stylesheet" href="CSS继承.css" type="text/css">
/* 引入的样式后写，优先级高于内部样式 */

单一样式优先级

style行间样式 > id > class > tag > * > 继承的样式

!important提升优先级

提升样式优先级，非规范方式，不建议使用
不能被继承

<style>
    #div {color: blue !important;} /*此时优先级高于行间样式为最高优先级*/
</style>
<body>
    <div>
        <p id="div" style="color:red">这是一段文字</p>
    </div>
</body>

标签+类与单类

标签+类的优先级大于单类的优先级

<style>
    div.class{color:blue}
    .calss{color:red}
</style>
<body>
    <div class="class">
        这是一个块
    </div>
</body>

群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高

层次优先级

权重比较

<style>
  /*根据权重的大小比较*/
  ul li .box p input {}
  .he span #elem {}
</style>

约分比较

<style>
  /*将优先级相同的约去，再进行比较*/
  ul li .box p input #login {}
  .he span #elem {}
</style>

注：尽量避免太多的层次，一般写三层以内

CSS笔记

文章目录

CSS笔记

什么是CSS？

1.CSS基础语法

内联样式与内部样式

2.CSS颜色表示法

3.CSS背景样式

背景实现视觉差的练习

4.边框样式

边框实现三角形

5.文字样式

字体类型

字体大小与粗细

font-weight：字体粗细

font-style：字体样式

6.CSS段落样式

文本修饰与文本大小写

文本缩进

文本对齐

文本的行高

文本间距

英文折行

7.CSS复合样式

8.CSS选择器

id选择器

class选择器

标签选择器(Tag选择器)

群组选择器

通配选择器

层次选择器

属性选择器

CSS伪类选择器

结构型伪类选择器

9.CSS样式继承

10.CSS的优先级

相同样式优先级

内部样式与外部样式

单一样式优先级

!important提升优先级

标签+类与单类

群组优先级

层次优先级

“相关推荐”对你有帮助么？