HTML + CSS 核心笔记（二）

俸涛努力学前端

已于 2024-10-04 11:48:59 修改

阅读量294

点赞数 8

分类专栏： HTML+CSS 文章标签：笔记 html css 前端开发语言

于 2024-10-03 22:39:43 首次发布

本文链接：https://blog.csdn.net/2301_80115241/article/details/142696976

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

语义化

无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

div ：独占一行

span ：不换行

有语义的布局标签

字符实体

作用：在网页中显示预留字符

lt 是 less than 的缩写

gt 是 greater than 的缩写

CSS 定义

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 文档的呈现（美化内容）

/*CSS 书写规则 
选择器{属性名:属性值;}*/
<style>
    p {
    color:red;
}
</style>
/* CSS 书写在什么位置？
  title 标签下方
CSS代码书写在style标签内
*/

CSS 引入方式

内部样式表：学习使用

CSS 代码写在 style 标签里面

外部样式表：开发使用

CSS 代码写在单独的 CSS 文件中（ .css ）这个用的很多

在 HTML 使用 link 标签引入

<link rel="stylesheet" href="./my.css">

行内样式：配合 JavaScript 使用

CSS 写在标签的 style 属性值里

<div style="color:red; font-size:20px;">这是div标签</div>

选择器

作用：查找标签，设置样式

标签选择器

使用标签名作为选择器 → 选中同名标签设置相同的样式

例如：p, h1, div, a, img......

<style>
p {
    color:red;
}
</style>

注意：标签选择器无法差异化同名标签的显示效果

类选择器

查找标签，差异化设置标签的显示效果

<!--定义类选择器 → .类名
  使用类选择器 → 标签添加 class="类名"-->
<style>
/* 定义类选择器 */ .red {
color: red;
}
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>

注意：

• 类名自定义，不要用纯数字或中文，尽量用英文命名

• 一个类选择器可以供多个标签使用

• 一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如： news-hd

id选择器

查找标签，差异化设置标签的显示效果

id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

<!--定义 id 选择器 → #id名
  使用 id 选择器 → 标签添加 id= "id名"-->

<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

注意：同一个 id 选择器在一个页面只能使用一次

通配符选择器

查找页面所有标签，设置相同样式

通配符选择器： * ，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

* {
    color:red;
}

通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距

* {
    margin:0;
    padding:0;
}

画盒子

<style>
.box {
     width:100px;  /*记得加单位px*/
     height:100px;
    background-color:red;  /*只有高度和宽度，才能设背景色*/
}
</style>
<div class="box"></div>

文字控制属性

字体粗细

/*属性名：font-weight*/
/*不加粗 用400 或 normal*/
font-weight:400;   /*开发时使用*/
font-weight:normal;

/*加粗 用700 或 bold*/
font-weight:700; /*开发使用*/
font-weight:bold;
/*注意，别把 ; 丢掉了*/

字体样式（是否倾斜）

作用：清除文字默认的倾斜效果

属性名： font-style

属性值

• 正常（不倾斜）：normal

• 倾斜：italic

行高

作用：设置多行文本的间距

属性名： line-height

属性值

• 数字 + px

• 数字（当前标签 font-size 属性值的倍数）

/*第一种写法：数字 + px*/
line-height:30px;
/*第二种：当前标签font-size属性值的倍数 */
font-size:15px;
line-height:2;

行高-垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

字体族

属性名： font-family

属性值：字体名1, 字体名2…., 字体族名（可以只写一个字体名）

执行顺序：从左向右依次查找

font-family:Microsoft YaHei,Heiti SC,arial,sans-serif;

建议 font-family 属性最后设置一个字体族名

网页开发建议使用无衬线字体

font 复合属性

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开

font: 是否倾斜是否加粗字号/行高字体（必须按顺序书写）

/*font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）*/
div{
    font:italic 700 30px 楷体;
}
/*注意：字号和字体值必须书写，否则 font 属性不生效*/

文本缩进

属性名： text-indent

属性值：

• 数字 + px

• 数字 + em （推荐：1em = 当前标签的字号大小）

p {
    text-indent:2em;
}

文本对齐方式

作用：控制内容水平对齐方式

属性名： text-align

属性值

水平对齐方式 – 图片

text-align本质是控制内容的对齐方式，属性要设置给内容的父级

<style>
    div {
        text-align:center;
}
</style>
<div>
    <img src="./images/1.ipg" alt="">
</div>

文本修饰线

属性名： text-decoration

属性值

color文字颜色

属性名： color

属性值

注意：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色