Css

CSS 定义

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

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

<title>Css 初体验</title>
<style>
/*选择器{}*/
p {
    /* css 属性 */
    color: red;
}
</style>
<p>体验 css</p>

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;
 }
 .size {
    font-size: 55px;
 }  
</style>


<div class="red size">这是div标签</div>
```
  - 注意:
    - 类名自定义，不要用纯数字或中文，尽量用英文命名
    - 一个类选择器可以供多个标签使用
    - 一个标签可以使用多个类名，类名之间用空格隔开
  开发习惯:类名见名知意，多个单词可以用-连接，例如:news-hd
id 选择器
- 作用:查找标签，差异化设置标签的显示效果。
- 场景:id 选择器一般配合JavaScript 使用，很少用来设置 CSS 样式
- 步骤:
  - 定义 id 选择器 → #id名
  - 使用 id 选择器 → 标签添加 id="id名"
```
<style>
 /*定义类选择器*/
 #red {
	color: red;
 }
</style>


<div id="red">这是div标签</div>
```
通配符选择器
- 作用:查找页面所有标签，设置相同样式
- 通配符选择器: *,不需要调用,浏览器自动查找页面所有标签，设置相同的样式
```
* {
	color: red;
}
```

画盒子

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

新属性

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

<head>
    <style>
        .first {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .second {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="first">第一个盒子</div>
    <div class="second">第二个盒子</div>
</body>

字体

字体大小

属性名：font-size

属性值：文字尺寸，PC 端网页最常用的单位 px

/* google浏览器默认文字大小16px*/
p {
	font-size:30px;
}

字体粗细

属性名:font-weight

属性值

数字(开发使用)

正常 400

加粗 700
关键字

正常 normal

加粗 bold

正常	400
加粗	700

正常	normal
加粗	bold

/*不粗*/
font-weight:400
/* 加粗 */
font-weight:700

字体样式(是否倾斜)

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

属性名:font-style

属性值

正常(不倾斜):normal
倾斜:italic

倾斜标签

<head>
    <style>
        em {
            font-style: normal;
        }
        div {
            font-style: italic;
        }
    </style>
</head>
<body>
	<!--  em默认是倾斜的  -->
    <em>em标签</em>
    <div>div标签</div>
</body>

行高

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

属性名:line-height

属性值

数字+px

数字(当前标签font-size属性值的倍数)

line-height: 30px;

/*当前标签字体大小为16px*/
line-height:2;

<head>
    <style>
        span {
            /*line-height: 30px;*/
            /*标签值是数字，表示当前标签字体大小的倍数*/
            line-height: 2;
        }
    </style>
</head>
<body>
    <span>今年受成本驱动、雷求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水价格运行平稳，优质优价特征
    明显，农民样机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、
    农药、柴油等农资价格大幅上涨，种粮成本随之增加，加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南早北涝”等极端天气，虽然没有带来灾害性后果，但一
    些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</span>
</body>

行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)。

行高-垂直居中

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

<head>
    <style>  
        .font {
            height: 100px;
            background-color: antiquewhite;

            /* 只能是单行文字垂直居中*/
            line-height: 100px;
        }
    </style>
</head>
<body>
	<div class="font">文字</div>
</body>

字体族

属性名:font-family
属性值:字体名

font-family:楷体;

font-family: Microsoft YaHei, Heiti sc, tahoma, arial, Hiragino Sans GB,"\588B\4F53", sans-serif;//sans-serif是无衬线字体标识

拓展(了解):font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找

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

font 复合属性

div {
    /*文字倾斜 */
    font-style:italic;
    /*文字加粗*/
    font-weight:700;
    /*字体大小是30px */
    font-size:30px;
    /*行高为字号的2倍*/
    line-height:2;
    /*字体是楷体 */
    font-family:楷体;
}

使用场景:设置网页文字公共样式

body {
	font: 12px/1.5 microsoft YaHei,Heiti sc,tahoma,arial,Hiragino sans GB,"\588B\4F53",sans-serif;
	color: #666;
}

div {
	/* font: 是否倾斜 是否加粗 字号/行高 字体; */
	font:italic 700 30px/2 楷体;
}

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

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

div {
	font:italic 700 30px/2 楷体;
}

注意: 字号和字体值必须书写，否则 font 属性不生效

/* 文字倾斜、文字加粗、文字大小是30px、行高2倍、楷体 */
.font-attribute {
    font: italic 700 30px/2 楷体;
    /*font: 30px/2 楷体;*/
    /*错误写法*/
    /*font: italic 700 30px/2;*/
}

<div class="font-attribute">测试font属性</div>

文本缩进

属性名：text-indent
属性值:

数字 + px
数字+em(推荐:1em=当前标签的字号大小)

p {
	text-indent: 2em;
}

<head>
    <style>
        p {
            font-size: 30px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>今年受成本驱动、雷求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水价格运行平稳，优质优价特征
    明显，农民样机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、
    农药、柴油等农资价格大幅上涨，种粮成本随之增加，加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南早北涝”等极端天气，虽然没有带来灾害性后果，但一
    些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</p>
</body>

文本对齐方式

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

属性名:text-align

属性值

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

水平对齐方式-文字

<head>
    <style>
        h1 {
            /*居中的文字内容，不是标签*/
            text-align: center;
        }
    </style>
</head>
<body>
	<h1>标题文字</h1>
</body>

水平对齐方式-图片

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

<style>
	div {
		text-align:center;
	}
</style>

<div>
	<img src="./images/1.jpg" alt="">
</div>

文本修饰线

属性名：text-decoration

属性值

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

<style>
   a {
        text-decoration:none;
    }

    .line {
        text-decoration: underline;
    }
</style>

<div class="line">测试下划线</div>
<a href="#">测试下划线</a>

color 文字颜色

属性名: 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>
    h2 {
        /*color: red;*/
        /*color: rgb(0,255,0);*/
        /*color: rgba(0,0,0,0.6);*/
        color: #0fe;
    }
</style>

<h2>h2 标签</h2>

调试工具-谷歌浏览器

作用:检查、调试代码;帮助程序员发现代码问题、解决问题

打开调试工具
- 浏览器窗口内任意位置/选中标签 → 鼠标右键 → 检查
- F12
使用调试工具

调试工具的细节

1.如果是错误的属性，有黄色叹号

2.css 属性的前面有多选框，如果勾选:这个属性生效;如果没有勾选:这个属性不生效

posted @ 2025-05-05 12:19 snail灬阅读(35) 评论(0) 收藏举报

刷新页面返回顶部

snail

Css