您现在的位置是:网站首页> 编程资料编程资料

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

2023-05-25 278人已围观

简介 带你了解CSS基础知识,样式_CSS/HTML_

什么是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中引入了

三种方式代码展示

内联定义方式

HTML中引入CSS样式的第一种方式:内联定义方式

样式块方式

HTML中引入样式的第二种方式:样式块方式对不起,用户名不能为空!









链入外部样式表文件

css文件

 a{ text-decoration: none; } #baiduSpan{ text-decoration: underline; cursor: wait; } 
HTML中引入CSS样式的第三种方式:链入外部样式表文件百度点击我链接百度

以下是常用的样式

边框

(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; } 

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望你能够多多关注的更多内容!

-六神源码网