CSS基础（1）

鱼鱼～

于 2023-02-21 19:26:32 发布

阅读量211

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_57310897/article/details/129147732

版权

一、初识CSS

CSS指的是层叠样式表，是前端最核心的三个技术之一，用于控制网页的外观，美化网页。

二、CSS的引入方式

1.内联样式：写在style标签里面(写在head里面)

<style>
div{color: rgba(255, 0, 255, 0.75);}
</style>

2.外联样式：写在css文件中，然后用link引入html文件(写在head里面)

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

3.行内样式：写在开始标签中，style="属性"(写在body里面)

<div style="color: brown;">

三、字体属性

font-size 字体大小；font-family 字体类型；font-weight 字体粗细；font-style 字体风格。

<style>
        div{
            /* 谷歌浏览器默认字体大小是16px,12px是最小号 */
            font-size: 14px;
            /* 字体  多个字体时，会一直匹配一直到匹配成功为止
                如果都不匹配，就使用浏览器的默认字体*/
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* 字体粗细，以100为跨度，400是正常大小 */
            font-weight: 400;
            /* 字体风格  italic倾斜 */
            font-style: italic;
            /* 
            综合设置字体（一般不会使用）：
            选择器 {
            font: font-style  font-weight  font-size/line-height  font-family;
                }
            */
        
        }
    </style>

四、文本属性

text-align 文本对齐方式（居中，左对齐，右对齐）；text-decoration 文本修饰（下划线、中划线、顶划线）；text-transform 大小写转换（uppercase 全大写 capitalize首字母大写 lowercase 转换为小写）；text-shadow 文本阴影；direction 文本方向；word-spacing单词间距；letter-spacing字符间距；line-height 行高。

注意：设置文本垂直水平居中，当前文本的line-height为当前盒子高度

<style>
        div{
            /* 颜色：1.使用英文；2.16进制；3.rgb值--alpha透明度 取值0-1 */
            color: rgba(255, 0, 255, 0.75);
            /* 居中(文本对齐方式) */
            text-align: center;
            /* 文本修饰:下划线，中划线，顶划线 */
            text-decoration: underline;
            /* 文本转换  
            英文向上转换：转换为大写（uppercase 全大写  capitalize首字母大写）
               向下转换：转换为小写
            */
            text-transform:lowercase;
            /* 文本阴影 text-shadow: x轴 y轴 模糊程度 阴影颜色;*/
            text-shadow: 5px 5px 5px red;
            /* 文本方向 默认为左ltr(left to right)   */
            direction: ltr;
            /* 字符间距  letter-spacing字符间距  word-spacing 单词间距*/
            /* letter-spacing: 20px; */
            word-spacing: 30px;
            /* 行高 */
            line-height: 40px;

        }
       
    </style>

五、基本选择器以及其优先级

1.通配符 *{}

2.标签选择器标签{}

3.类名选择器 .类名{}

4.id选择器 #id值{}

优先级：通配符<标签选择器<类名选择器<id选择器<!important

拓展：

!important使用方法：选择器 {样式：值 !important}

注意：使用一个 !important 规则时，此声明将覆盖任何其他声明。

!important缺点：破坏了样式表中的固有的级联规则使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

!important优点：覆盖全站或外部 CSS

使用建议：一般尽量不使用，如果要在你的网站上设定一个全站样式的 CSS 样式可以使用 !important，但是我们一般不这样使用，只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important。

六、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。伪类选择器使用“:”冒号来表示，比如 :link{}

分类：

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标移动到链接上

a:active 选定的链接

举例：

<style>
       
        a:link{
            font-size: 20px;
            color: red;
        }
        a:visited{
            color: greenyellow;
        }
        a:hover{   /*鼠标移动到链接上*/
            font-size: larger;
            color: plum;
        }
        a:active {		/*选定的链接  鼠标点击不松开的状态*/
		font-size: 16px;
		color: blue;
		font-weight: 700;
	}

    </style>

七、结构伪类选择器

:first-child 获取第一个子元素
:last-child 获取最后一个子元素。注意：IE8不支持X:last-child。
:nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。
:nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。

:first-of-type 选择特定元素的第一个子元素
:last-of-type 选择特定元素的最后一个子元素
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取

<!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>
        
         /* nth-child(n)先找是第几个孩子，在匹配是不是对应的选择器，如果不是，则不会有变化 */
        div:nth-child(3){
            color: pink;
        }
        div:nth-child(4){
            color: blue;
        }

        /* 先找冒号前面的选择器，在匹配第几个孩子 */
        div:nth-of-type(5){
            color: red;
        }
        
    </style>
</head>
<body>
    <!-- 需求：3W为红色字体 -->
    <div>1w</div>
    <div>2w</div>
    <p>3p</p>
    <div class="name" id="3w">3w</div>
    <div class="name">4w</div>
    <div>5w</div>
    <div>6w</div>
</body>
</html>

八、目标伪类选择器

:target选择器用于选取页面中的某个target元素。跳转链接的目标的文字发生变化

举例：（<h2 id="live">个人生活</h2> 标题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>
        :target {
            color:red;
}
    </style>
</head>
<body>
    <a href="#live">个人生活</a>
<h2 id="live">个人生活</h2>
<p>
    家庭 刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，一位妹妹以及一位弟弟（刘德盛）。
</p>
</body>
</html>