轻量级前端框架助力开发者提升项目效率与性能
620
2022-12-29
带你了解CSS基础知识,样式
目录什么是css在HTML页面中嵌套使用CSS的两种方式三种方式代码展示链入外部样式表文件以下是常用的样式总结
什么是CSS
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是:
修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。
在HTML页面中嵌套使用CSS的两种方式
第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式。语法格式:
<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”>标签>
第二种方式:链入外部样式表文件,这种方式最常用。(将样式写到一个独立的xxx.css文件当中,在需要的网页上直接引入css文件,样式就引入了)语法格式:
这种方式易维护,维护成本较低。
xxx.css文件
1.html中引入了
2.html中引入了
3.html中引入了
4.html中引入了
三种方式代码展示
内联定义方式
样式块方式
/*
这是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;
heihttp://ght: 30px
}
对不起,用户名不能为空!
链入外部样式表文件
css文件
a{
text-decoration: none;
}
#baiduSpan{
text-decoration: underline;
cursor: wait;
}
点击我链接百度
以下是常用的样式
边框
(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; }
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望你能够多多关注我们的更多内容!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~