CSS层叠样式表（1）

小新是颗牙

已于 2023-05-15 15:34:49 修改

阅读量93

点赞数

分类专栏： web 文章标签：前端 html web css

于 2023-05-15 15:33:40 首次发布

本文链接：https://blog.csdn.net/m0_59374577/article/details/130655391

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

字体样式（是否倾斜）—— font-style

文本修饰线 —— text-decoration

文字颜色 —— color

CSS的书写

css书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。

<title>css初体验</title>

<style>

/*选择器{}*/

/*CSS属性*/

color : red；

}

</style>

CSS引入方式

样式表	说明	使用场景
内部样式表	CSS代码写在style标签里面	学习使用
外部样式表	CSS代码写在单独的CSS文件中（.css）在HTML使用link标签引入 <link rel="stylesheet" href="./my.css">	开发使用
行内样式	CSS写在标签的style属性值里 <div style="color: red; font-size: 20px;">div标签</div>	配合JavaScript使用

样式表

说明

使用场景

内部样式表

CSS代码写在style标签里面

学习使用

外部样式表

CSS代码写在单独的CSS文件中（.css）

在HTML使用link标签引入

开发使用

行内样式

CSS写在标签的style属性值里

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

配合JavaScript使用

/*外部样式表测试，假设这是一个my.css*/
/*选择器{css样式}*/
p{
    color: red;
}


/*在HTML中的代码*/
<head>

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

</head>
<body>
    <p>p标签</p>
</body>

/*行内样式测试*/
<body>

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

</body>

标签选择器

作用：使用标签名作为选择器 -> 选中同名标签设置相同的样式，无法差异化同名标签的样式

<style>

  p{

    color : red；

  }

</style>

类选择器

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

步骤：

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

<style>
  /*定义类选择器*/

  .red{

       color: red;

  }

</style>
/*使用类选择器*/

<div class="red">这是div标签</div>

注：

类名自定义，尽量用英文命名
一个类选择器可以提供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开
类名见名知意，多个单词可以用 - 连接，例如：music-cz

id选择器

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

场景：id选择器一般配合Javascript使用，很少用来设置CSS样式

步骤：

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

<style>
  /*定义id选择器*/

  #red{

       color: red;

  }

</style>
/*使用id选择器*/

<div id="red">这是div标签</div>

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

通配符选择器

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

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

*{
  
  color: red;

}

画盒子

目的：使用合适的选择器画盒子

属性名	作用
width	宽度
height	高度
background-color	背景色

<style>
  /*定义类选择器*/

  .red{

       width：100px;
       height：100px;
       background-color：blue;

  }

</style>
/*使用类选择器*/

<div class="red">这是div标签</div>

文字控制属性

描述	属性	效果
字体大小	font-size
字体粗细	font-weight	文字&文字
字体倾斜	font-style	文字&文字
行高	line-family	文字文字
字体族	font-family
字体复合属性	font	复合属性
字体缩进	text-indent	CSS 框架是一系列 CSS 文件的集合体，用于简化web前端开发的工作，提高工作效率
文本对齐	text-align	对齐方式
修饰线	text-decoration	文字&文字&文字
颜色	color	文字&文字

字体大小 —— font-size

font-size属性必须有单位，否则属性无效，常用单位px。

p{

  font-size: 30px;

}

字体粗细 —— font-weight

属性值：

数字（开发使用）
正常	400
加粗	700

div{
    /*div标签的字体加粗*/

    font-weight: 700px;

}

<div>div标签</div>

字体样式（是否倾斜）—— font-style

属性值：

正常（不倾斜）	normal
倾斜	italic

div{
    /*div标签设置成倾斜样式*/

    font-style: italic;

}

<div>div标签</div>

行高 —— line-height

行高 = 上间距 + 文本高度 + 下间距

属性值：

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

p{
    /*行高值为30px*/
    line-height: 30px;

    /*默认字体大小值16px，设置为数字，表示当前标签字体大小的倍数，即行高是字体的2倍
    line-height: 2;

}

<p>CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、
网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率</p>

行高 —— 垂直居中

设置高度与行高相同时，就会显示垂直居中

div{

    height: 100px;
    background-color: red;
    
    /*注意：只能设置单行文本
    line-height: 100px;

}
<div>文字</div>

字体族 —— font-family

div{

    font-family: 宋体；

}
<div>文字</div>

注：font-family属性值可以书写多种字体名，字体名之间用逗号隔开，从左向右依次查找。

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

font-family:Heiti SC, tahoma, arial,sans-serif;

font复合属性

书写顺序：font: 是否倾斜是否加粗字号/行高字体

注：字号和字体值必须书写缺一不可，否则font属性无效

div{
    /*倾斜,加粗700,字体大小30px,行高2倍,字体宋体
    font: italic 700 30px/2 宋体；

    /*font属性必须书写字号和字体*/
    font: 30px 宋体；
}
<div>font文字</div>

文本缩进 —— text-indent

属性值：

数字 + px

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

p{
  
    text-indent: 2em;  

}
<p>CSS框架是预先准备好的软件框架，允许使用层叠样式表语言更容易，
更符合标准的进行网页设计。</p>

文本对齐 —— text-align

属性值：

属性值	效果
left	左对齐（默认）
center	居中对齐
right	右对齐

h1{
    /*设置的是文字内容，不是标签*/
    /*text-align: left;*/
    /*text-align: center;*/
    text-align: right;

}
<h1>css</h1>

水平对齐方式 —— 图片

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

<style>
    div{
        /*让图片居中对齐*/
        text-align: center;

    }
</style>
<div>
    <img src="./abc.jpg" alt="">
</div>

文本修饰线 —— text-decoration

属性值：

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

<style>

    a{
        text-decoration: none;
    }

    div{
        text-decoration: underline;
    }

</style>
<a href="#">去掉下划线</a>
<div>添加下划线</div>

文字颜色 —— color

属性值：

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	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，简写#000，#fc0	开发使用

<style>

    h1{
        color: green;
        color: rgb(0,255,0);
        color: rgba(0,0,0,0.3);//越接近0越透明
        color: #00f;
    }

</style>
<h1>标题文字</h1>