这篇文章主要介绍“CSS基础使用方法有哪些”，在日常操作中，相信很多人在CSS基础使用方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS基础使用方法有哪些”的疑惑有所帮助！接下来，请跟着小编一起来
这篇文章主要介绍“CSS基础使用方法有哪些”，在日常操作中，相信很多人在CSS基础使用方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS基础使用方法有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰html页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。语法格式：
<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”></标签>
第二种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）语法格式：
这种方式易维护，维护成本较低。xxx.css文件1.html中引入了2.html中引入了3.html中引入了4.html中引入了内联定义方式
<!doctype html><html><head><title>HTML中引入CSS样式的第一种方式：内联定义方式</title><head><body><!--width宽度样式heght高度样式background-color背景颜色样式display布局样式（none表示隐藏，block表示显示）--><div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;border-color: red;border-width: 3px;border-style: solid"></div><!--样式还可以这样写border: width style color--><div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;border: thick double yellow; "></div></body></html>样式块方式
<!doctype html><html><head><title>HTML中引入样式的第二种方式：样式块方式</title><style type="text/css">#usernameErrORMsg{font-size: 12px;color: red;}div{background-color: black;border: 1px solid red;width: 100px;height: 100px;}.myclass{border: 2px double blue;width: 400px;height: 30px}</style></head><body><!--设置样式字体大小12px,颜色为红色--><!--<span id="usernameErrorMsg" style="font-size: 12px;color: red">对不起，用户名不能为空！</span>--><span id="usernameErrorMsg"">对不起，用户名不能为空！</span><div></div><div></div><div></div><!--class相同的可以认为是同一类标签。--><br><br><br><br><input type="text" class="myclass"/><br><br><br><br><br><select class="myclass"><option>专科</option><option>本科</option><option>硕士</option></select></body></html>css文件
a{text-decoration: none;}#baiduSpan{text-decoration: underline;cursor: wait;}<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML中引入CSS样式的第三种方式：链入外部样式表文件</title><!--引入css--><link type="text/css" rel="stylesheet" href="css/1.css"/></head><body><a href="Http://www.baidu.com">百度</a><span id="baiduSpan">点击我链接百度</span></body></html>边框
（1）
div{ border : 1px solid red; }
（2）
div{ border-width : 1px; border-style : solid; border-color : red; }
隐藏
div{ display : none; }
字体
div{ font-size : 12px; color : red; }
文本装饰
a{ text-decoration : none; }
a{ text-decoration : underline; }
列表
ul{ list-style-type : none; }
设置鼠标悬停效果
:hover
定位
div{ position : absolute; left : 100px; top : 100px; }
鼠标小手
div{ cursor : pointer; }
到此，关于“CSS基础使用方法有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
--结束END--
本文标题: CSS基础使用方法有哪些
本文链接: https://www.lsjlt.com/news/346907.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0