目录
- 什么是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中引入了
三种方式代码展示
内联定义方式
!doctype html>
html>
head>
title>HTML中引入CSS样式的第一种方式：内联定义方式/title>
head>
body>
!--
width 宽度样式
heght 高度样式
background-color 背景颜色样式
display 布局样式（none表示隐藏，block表示显示）
-->
div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border-color: red;border-width: 3px;border-style: solid">/div>
!--样式还可以这样写
border: width style color
-->
div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border: thick double yellow; ">/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>
!--
设置样式字体大小12px,颜色为红色
-->
!--span id="usernameErrorMsg" style="font-size: 12px;color: red">对不起，用户名不能为空！/span>-->
span id="usernameErrorMsg"">对不起，用户名不能为空！/span>
div>/div>
div>/div>
div>/div>
!--class相同的可以认为是同一类标签。-->
br>br>br>br>
input type="text" class="myclass"/>
br>br>br>br>br>
select class="myclass">
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>
!--引入css-->
link type="text/css" rel="stylesheet" href="css/1.css"/>
/head>
body>
a href="http://www.baidu.com">百度/a>
span id="baiduSpan">点击我链接百度/span>
/body>
/html>
以下是常用的样式
边框
（1）
div{ border : 1px solid red; }
（2）
div{ border-width : 1px; border-style : solid; border-color : red; }
隐藏
字体
div{ font-size : 12px; color : red; }
文本装饰
a{ text-decoration : none; }
a{ text-decoration : underline; }
列表
ul{ list-style-type : none; }
设置鼠标悬停效果
定位
div{ position : absolute; left : 100px; top : 100px; }
鼠标小手
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望你能够多多关注脚本之家的更多内容！
您可能感兴趣的文章:- vue页面引入three.js实现3d动画场景操作
- jQuery插件slicebox实现3D动画图片轮播切换特效
- CSS自定义滚动条样式案例详解
- 利用CSS制作3D动画
