带你了解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中引入了
三种方式代码展示
内联定义方式
HTML中引入CSS样式的第一种方式：内联定义方式 - 锐客网
样式块方式
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; height: 30px} 对不起，用户名不能为空！
链入外部样式表文件
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; }
总结 【带你了解CSS基础知识|带你了解CSS基础知识,样式】本篇文章就到这里了，希望能够给你带来帮助，也希望你能够多多关注脚本之家的更多内容！
推荐阅读
- 我们重新了解付费。
- 拍照一年啦，如果你想了解我，那就请先看看这篇文章
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- C语言中的时间函数clock()和time()你都了解吗
- 不废话，代码实践带你掌握|不废话，代码实践带你掌握 强缓存、协商缓存！
- 操作系统|[译]从内部了解现代浏览器(1)
- 生发知识，带你深入了解
- 了解自然大气粒子对气候的影响
- 带你了解类型系统以及flow和typescript的基本使用
- 3.css浮动