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

日期：2021-08-03 栏目：程序人生浏览：次

这篇文章主要介绍了一些css基础知识关于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中引入了

三种方式代码展示

内联定义方式

<!doctype html> <html> <head> <title>HTML中引入CSS样式的第一种方式：内联定义方式</title> <head> <body>  <div></div>  <div></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>   <span">对不起，用户名不能为空！</span> <div></div> <div></div> <div></div>  <br><br><br><br> <input type="text"/> <br><br><br><br><br> <select> <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>  <link type="text/css" href="https://www.jb51.net/css/1.css"/> </head> <body> <a href="https://www.baidu.com">百度</a> <span>点击我链接百度</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; }

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望你能够多多关注脚本之家的更多内容！

您可能感兴趣的文章:

转载注明出处：https://www.heiqu.com/zyfjyf.html

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

相关推荐