HTML与CSS学习总结基础2

鱼晚.

已于 2023-11-20 19:37:23 修改

阅读量22

点赞数

文章标签： html css 学习

于 2023-11-17 14:20:07 首次发布

本文链接：https://blog.csdn.net/m0_62146534/article/details/134457278

版权

引入外部样式表

开发常用

<link rel="stylesheet" href=" ">

行内样式

一般是配合JavaScript使用

<div style="color:red;font-size:20px;">这是一个示例</div>

基础选择器

标签选择器

使用标签名作为选择器如：p、h1、div、img、a……

<p>、<h1>、<div>、<img>、<a>

类选择器

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

步骤：

定义类选择器->.类名
使用类选择器->标签添加class=“类名”

id选择器

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

场景：一般配合JavaScript使用，很少用来设置css样式

步骤

定义id选择器->#id名
使用id选择器->标签添加id=“id名”

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

通配符选择器

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

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

盒子属性

属性	说明
width	宽度
height	高度
background-color	背景颜色

文字效果

属性	描述
font-size	字体大小
font-weight	字体粗细
line-height	行高，由上间距+文本高度+下间距组成，如果属性值只写数字n，就代表行行高为font-size的n倍
font-family	字体
font	字体复合属性
text-indent	文本缩进
text-align	文本对齐方式
text-decoration	修饰线
color	颜色
font-style	控制字体倾斜，设置不倾斜的属性值为"normal"，倾斜则为italic。

行高-垂直居中

垂直居中技巧：把行高属性值与盒子高度属性值设置为一样，但是只能单行文字垂直居中

字体族

font-family:楷体;

font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左往右依次查找

font-family属性最后设置一个字体族名sans-serif，网页开发建议使用无衬线字体

font复合属性

font：是否倾斜是否加粗字号/行高字体；

font：italic 700 30px/2 楷体； /*文字倾斜、文字加粗、字体大小30px、行高两倍、楷体*/

字号和字体值必须书写，否则font不生效

文本缩进

属性名：text-indent

属性值：

数字+px
数字+em（推荐用法：1em=当前标签字号的大小，2em可实现首行缩进两个字符效果）

文本对齐方式

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

text-align控制的是文字在水平方向的位置

文本修饰线

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线

文字颜色

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	red、green、blue……	学习测试
rgb表示法	rgb（r,g,b）	r,g,b表示红绿蓝三原色，取值0-255	了解
rgba表示法	rgba（r,g,b,a）	a表示透明度，取值：0-1	开发使用，实现透明色
十六进制表示法	#RRGGBB	#000000,#FFCC00	开发使用，可以从设计稿复制

复合选择器

定义：由两个或多个基础选择器通过不同方式组合而成

作用：更准确、更高效地选择目标元素（标签）

后代选择器：父标签儿子标签{ }

div span{ } //选中div中所有的span的样式

子代选择器：选中某元素的子代元素（最近的一个子级）

div>span{ }

并集选择器：选择多组标签设置相同的样式

选择器1，选择器2，选择器3，……，选择器N{ }，选择器之间用逗号隔开。

div，

p，

span{ }

交集选择器：选中同时满足多个条件的元素

选择器1选择器2{ } 选择器之间连写，没有如何符号
<p class="box">p标签，使用了类选择器</p>
<p>p标签</p>
<div class="box">div 标签，使用了类选择器</div>
p.box{
    color:red;
}

伪类选择器

伪类选择器：伪类表示元素状态，选择元素的某个状态设置样式

鼠标悬停状态：选择器 :hover{CSS属性}

eg:

a:hover{

color:red;

}

伪类-超链接

超链接一共有四个状态

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时（长按鼠标可见）

如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。

CSS特性

继承性

子集默认继承父级的文字控制属性（如果标签自己有样式，则不会继承父级对应的样式，如a标签自带的颜色和下划线样式不会继承父级的）

层叠性

相同的属性会覆盖：后面的css属性会覆盖前面的css属性
不同的属性会叠加：不同的css属性都会生效

优先级

当一个标签使用了多种选择器时，基于不同类型的选择器的匹配规则

规则：选择器优先级高的样式生效

公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important

（选中标签的范围越大，优先级越低）

如果是复合选择器，则需要权重叠加计算

eg：
<style>

     .c1 .c2 div{
 
        color:green                /*（0,0,2,1）*/

}

    div #box3{

        color:blue;                /*（0,1,0,1）*/

}

    #box1 .c3{

        color:orange;               /*（0,1,1,0） */       

}
</style>

<body>
    <div id="box1" class="c1">
    (div id="box2" class="c2">
    <div id="box3" class="c3">
        这行文本的颜色

    </div>
  </div>
</div>
</body>
(行内样式，id选择器个数，类选择器个数，标签选择器个数）

经过比较可知第三个优先级最高，最终显示的会是橙色,三个复合选择器都没有继承关系，都是直接指向文本内容。

如果有继承关系，那么继承权重是最低的，eg：

<style>
    
    div p{
        color:red;           /*直接指向文本内容的样式，没有继承关系*/
    }
    
    .father{
        color:blue;        /*不是直接指向文字内容，有继承关系，故而优先级最低*/
    }
</style>

<body>
    <div class="father">
    <p class="son">
        文本内容
    </p>
   </div>
  </body>

<style>
    #father #son{
        color:blue;               /*(0,2,0,0)     此优先级最高*/  
    }
    
    #father p.c2{
        color:black;            /*(0,1,1,1)*/
    }

    div.c1 p.c2{
        color:purple;        /*(0,0,2,2)*/
    }

    #father{
        color:red !important;        /*有继承，优先级最低*/
    }
    div#father.c1{
        color:pink;        /*也是继承*/
    }
</style>

<body>
    <div id="father" class="c1">
    <p id="son" class="c2">
        文本颜色
    </p>
   </div>
</body>

(行内样式，id选择器个数，类选择器个数，标签选择器个数）

从左到右一次比较，同一级个数多的优先级高，如果数目相同，则像后比较，！important权重最高，继承权重最低。

背景属性

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景复合属性	background

背景图

属性名：background-image

属性值：URL

背景图片平铺方式

属性名：background-repeat

属性值

no-repeat：不平铺
repeat：平铺（默认效果）
repeat-x：水平方向平铺
repeat-y：垂直方向平铺

背景图位置

属性名：background-position（bgp）

属性值：水平方向垂直方向；

如果用数值表示，水平方向负数为向左移动，正数为向右，垂直方向正数向下，负数向上。

使用关键字取值写法，可以颠倒取值顺序

可以只写一个关键字，另一个方向默认为居中，数字只写一个表示水平方向，垂直方向默认居中。

eg:background-position：right bottom；（表示图片在右下）

关键字

left：左侧
right：右侧
center：居中
top：顶部
bottom：底部

背景图缩放

属性名：background-size

属性值：

关键字【cover：等比例缩放背景图片以完全覆盖背景区，可能会导致图片部分看不见；contain：等比例缩放背景图以完全装入背景区，可能会导致背景区部分空白】
百分比：根据盒子尺寸计算图片大小
数字+单位

背景图固定

作用：背景不会随元素的内容滚动

属性名：background-attachment（bga）

属性值：fixed

标签的显示模式

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

块级元素

独占一行
宽度默认是父级的100%
添加宽高属性生效

行内元素

一行共存多个，尺寸有内容撑开，加宽高不生效

行内块元素

<img>
加宽高生效
在使用到右对齐的文字格式时，可设置为行内块模式，设置为块的话不能右对齐，因为块元素是独占一行的

转换显示模式

属性名：display

属性值：

属性值	效果
block	块级
inline-block	行内块
inline	行内

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        a{
            text-decoration: none;
            display: block;
            width:200px;
            height: 50px;
            background-color: rgb(66, 66, 233);
            text-align: center;
            line-height: 50px;
        }
        a:hover{
            background-color: grey;
        }
       
      
    </style>
</head>
<body>
    <div>
    <a href="#">HTML</a>
    <a href="#">css</a>
    <a href="#">javascript</a>
    <a href="#">vue</a>
    <a href="#">C++</a>
    <a href="#">java</a>
</div>
    
    
</body>
</html>