学习CSS（一）

最新推荐文章于 2023-11-06 23:50:12 发布

今天学什么！

最新推荐文章于 2023-11-06 23:50:12 发布

阅读量172

点赞数

分类专栏： CSS 文章标签：前端 css 学习 html5

本文链接：https://blog.csdn.net/qq_56994594/article/details/124058126

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.css简介

css是层叠样式表的简称，也称之为css样式表或级联样式表。

css最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（html）与样式（css）相分离。

1.1css语法规范

css规则有两个主要的部分构成：选择器以及一条或多条声明。

（一定要加分号表示结束）

在<head></head>里面写

<style>

/* 选择器{样式} */

/* 给谁改样式{改什么样式} */

p {

color: red;

/* 修改了文字大小为12像素 */

font-size: 12px;

}

</style>

1.2 CSS代码风格

1.2.1样式格式书写：用展开格式！

1.2.2样式大小写：全部用小写字母，特殊情况除外

1.2.3空格规范

2.CSS基础选择器

2.1CSS选择器的作用

选择器（选择符）就是选择标签用的。

2.2选择器分类

选择器分类：基础选择器（单个选择器组成的）、复合选择器

基础选择器：标签选择器、类选择器、id选择器和通配符选择器

2.3标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

2.4类选择器

单独选一个或几个标签，可以使用类选择器。

<style>

/* 类选择器口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用。 */

.red {

color: red;

}

.star-xing {

color: purple;

}

</style>

</head>

<body>

<ul>

<li class="red">冰雨</li>

<li class="red">来生缘</li>

<li>李香兰</li>

<li>生僻字</li>

<li class="star-xing">江南style</li>

</ul>

<div class="red">我也想变红色</div>

</body>

类选择器-多类名

我们可以给一个标签指定多个类名，简单理解就是一个标签有多个名字。

多类名使用方式：

<style>

.red {

color: red;

}

.font35 {

font-size: 35px;

}

</style>

</head>

<body>

<div class="red font35">易烊千玺</div>

</body>

2.5id选择器

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

<style>

/* id选择器的口诀:样式#定义，结构id调用，只能调用一次，别人切勿使用。 */

#pink {

color: pink;

}

</style>

</head>

<body>

<div id="pink">易烊千玺</div>

</body>

2.6通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）

<style>

* {

margin: 0;

padding: 0;

color: red;

font-size: 35px;

}

</style>

</head>

<body>

<div>我的</div>

<span>我的</span>

<ul>

<li>还是我的</li>

</ul>

</body>

2.7基础选择器总结

3.CSS字体属性

3.1字体系列

CSS使用font-family属性定义文本的字体系列。（写多个字体是为了兼容性，从第一个字体开始看，如果第一个字体可以使用就会选用第一个字体，第一个字体不可使用就会看第二个字体可不可以使用，以此类推）

<style>

h2 {

font-family: '微软雅黑';

}

p {

/* font-family: 'Microsoft YaHei',Arial, Helvetica, sans-serif; */

font-family: 'Times New Roman', Times, serif;

}

</style>

</head>

<body>

<h2>pink的秘密</h2>

<p>那一抹众人中最漂亮的颜色，</p>

<p>优雅，淡然，又那么心中清澈，</p>

<p>前段总是伴随着困难和犯错，</p>

<p>静心，坦然，攻克一个又一个，</p>

<p>拼死也要克服它，</p>

<p>这是pink的秘密也是老师最后的嘱托</p>

</body>

3.2字体大小

CSS使用font-size属性定义字体大小。

<style>

body {

font-size: 16px;

}

/* 标题标签比较特殊，需要单独指定文字大小 */

h2 {

font-size: 18px;

}

</style>

</head>

<body>

<h2>pink的秘密</h2>

<p>那一抹众人中最漂亮的颜色，</p>

</body>

3.3字体粗细

CSS使用font-weight属性设置文本字体的粗细。

<style>

.bold {

/* font-weight: bold; */

/* 这个700的后面不要跟单位等价于bold 都是加粗的效果 */

/* 实际开发中，我们更提倡使用数字来表示加粗或变细 */

font-weight: 700;

}

h2 {

font-weight: 400;

/* font-weight: normal; */

}

</style>

</head>

<body>

<h2>pink的秘密</h2>

<p>那一抹众人中最漂亮的颜色，</p>

<p class="bold">拼死也要克服它，</p>

<p>这是pink的秘密也是老师最后的嘱托</p>

</body>

3.4 文字样式

CSS使用font-style属性设置文本的风格。

<style>

p {

font-style: italic;

}

em {

/* 让倾斜的字体不倾斜，就是赶紧脉动回来 */

font-style: normal;

}

</style>

</head>

<body>

<p>同学，上课时候的你</p>

<em>下课时候的你</em>

</body>

3.5字体复合属性

<style>

/* 想要div文字变倾斜加粗字号设置为16像素并且是微软雅黑 */

div {

/* font-style: italic;

font-weight: 700;

font-size: 16px;

font-family: 'Microsoft YaHei'; */

/* 复合属性：简写的方式节约代码 */

/* font: font-style font-weight font-size/line-height font-family; */

/* font: italic 700 16px/20px 'Microsoft YaHei'; */

font: 20px '黑体';

}

</style>

</head>

<body>

<div>三生三世十里桃花，一心一意百行代码</div>

</body>

3.6字体属性总结

4.CSS文本属性

CSS Text（文本）属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

4.1文本颜色

color属性用于定义文本的颜色。

<style>

div {

/* color: red; */

color: #ff0000;

/* color: rgb(200,0,0); */

}

</style>

</head>

<body>

<div>好事总会发生在下一个转弯，祝我们愿望都一一实现！</div>

</body>

4.2对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。

<style>

h1 {

/* 本质是让h1盒子里面的文字水平居中对齐 */

/* text-align: center; */

text-align: right;

}

</style>

</head>

<body>

<h1>居中对齐的标题</h1>

</body>

4.3装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

<style>

div {

/* 下划线 */

/* text-decoration: underline; */

/* 删除线 */

/* text-decoration: line-through; */

/* 上划线 */

text-decoration: overline;

}

a {

/* 取消a默认的下划线 */

text-decoration: none;

color: #333;

}

</style>

</head>

<body>

<div>生活顺利！</div>

<a href="#">生活顺利</a>

</body>

4.4文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

<style>

p {

font-size: 24px;

/* 文本的第一行首行缩进多少距离 */

/* text-indent: 20px; */

/* 如果此时写了2em 则是缩进当前元素2个文字大小的距离 */

text-indent: 2em;

}

</style>

</head>

<body>

<p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城布轨道交通系统。</p>

<p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤—对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>

<p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢?</p>

</body>

4.5行间距

line-height属性用于设置行间距的距离（行高），可以控制文字行与行之间的距离。

<style>

div {

line-height: 26px;

}

p {

line-height: 25px;

}

</style>

</head>

<body>

<div>中国人</div>

<p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城布轨道交通系统。</p>

<p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤—对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p> <p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢?</p>

</body>