您好,登录后才能下订单哦!
这篇文章主要介绍“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"> /* 这是CSS的注释 */ /* id选择器 #id{ 样式名: 样式值; 样式名: 样式值; 样式名: 样式值; ........ } */ #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基础使用方法有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。