目录
一、总体概述
二、学习内容
1、什么是CSS？
2、CSS的三种使用方式
1.HTML中引入CSS的第一种方式
2.HTML中引入CSS的第二种方式
3.HTML中引入CSS的第三种方式
3.CSS在列表中的使用
三、学习总结
学习链接：
【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
HTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibili
本次的学习主要是css的学习，其中包括CSS的基本使用和CSS的选择器。
CSS（Cascading Style Sheet）：层叠样式表语言。
CSS的作用是： 修饰HTML页面，修饰HTML页面中的某些元素的样式，让HTML页面更好看。 CSS好比是HTML的化妆品一样。 HTML还是主题，CSS依赖HTML。
CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式:
<标签 style="样式名：样式值;样式名:样式值;样式名:样式值;..."></标签><!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
</head>
<body><!--width 宽度样式height 高度样式background-color 背景色样式display 布局样式（none表示隐藏，block表示显示）
-->
<div style="width: 300px;height: 300px; background-color: #CCFFFF; display : block;
border-color: red;border-width: 1px;border-style: solid"></div>
<br><br><!--样式还能这样写：border : 1px solid black;
-->
<div style="width: 300px;height: 300px; background-color: #CCFFFF; display : block;
border: 1px solid black"></div>
</body>
</html>第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
语法格式：
<head><style type="text/css">选择器{样式名:样式值;样式名:样式值;.....}选择器{样式名:样式值;样式名:样式值;.....}</style></head><!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><title>HTML中引入CSS样式的第二种方式：样式块</title><style type="text/css">/*这是CSS的注释。*//*id选择器语法格式#id{样式名:样式值;样式名:样式值;样式名:样式值;......}*/#usernameErrorMsg{color: red;font-size: 18px;}/*标签选择器语法格式：标签名{样式名:样式值;样式名:样式值;样式名:样式值;......}标签选择器作用的范围比id选择器作用的范围广。*/div{background-color: black;border: 1px solid red;width: 100px;height: 100px;}/*类选择器语法格式：.类名{}le */.myclass{border: 1px solid red;width: 400px;height: 30px;}</style>
</head>
<body><!--设置样式字体大小12px，颜色为红色！
-->
<span id="usernameErrorMsg">对不起，用户名不能为空！</span>
<div></div>
<div></div>
<div></div><!--class相同的标签可以认为是同一类标签。-->
<br><br><br>
<input type="text" class="myclass"/><br><br><br><select class="myclass"><option>专科</option><option>本科</option><option>硕士</option>
</select>
</body>
</html>第三种方式：链入外部样式表文件。这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上 直接引入css文件，样式就引入了）
语法格式：
<link type="text/css" rel="stylesheet" href="css文件的路径"/>这种方式易维护，维护成本较低。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML中引入CSS样式的第三种方式：引入外部独立的css文件</title><link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<a href="">百度</a>
<span id="baiduspan">点击我链接到百度哦！</span>
<br><br><br>
<img src="../learn/pic.webp" height="200" width="200" alt="图片找不到哦！"/>
</body>
</html>
a{text-decoration: none;
}
/*cursor :鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题，建议用pointer。*/
#baiduspan{text-decoration: underline;cursor: pointer;
}<!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><title>列表样式</title><style type="text/css">ul{list-style-type: none;}</style>
</head>
<body>
<ul><li>中国<ul><li>北京</li><li>上海</li><li>重庆</li></ul></li><li>美国</li><li>俄国</li>
</ul>
</body>
</html>本次学习是对html中CSS的学习。
首先，CSS是值层叠样式表（Cascading Style Sheets），起到修饰HTML的作用，可以极大提高工作效率。
随后，我们需要知道，引用CSS的三种方式，分别为内联定义方式、样式块方式和链入外部样式表文件。其中链入外部表文件这种方式最为常用，可以通过对代码少量的修改，使得大部分页面可以同步进行修改。
此外，若要再HTML中设置CSS样式，也需要再元素中设置“id”和“class”选择器，即id选择器和类选择器。用法如下：
id选择器语法格式#id{样式名:样式值;样式名:样式值;样式名:样式值;......}标签选择器语法格式：标签名{样式名:样式值;样式名:样式值;样式名:样式值;......}标签选择器作用的范围比id选择器作用的范围广类选择器语法格式：.类名{}最后，CSS的使用可以大大的方便我们对HTML的页面布局进行调整，如位置，颜色，字体，边框等多个元素。
本文发布于:2024-02-02 09:28:40，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170683732142885.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
