带你了解CSS基础知识,样式

网友投稿 570 2022-12-29

带你了解CSS基础知识,样式

带你了解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文件

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小时内删除侵权内容。

上一篇:物联网iot(物联网iot招聘)
下一篇:小程序组件的开发(小程序前端组件)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~