什么是CSS

CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。

在HTML页面中嵌套使用CSS的三种方式

第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式：
<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”></标签>

第二种方式：在head标签中使用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>

以下是常用的样式

边框

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帮助的帮助文档
https://pan.baidu.com/s/1tuUHbmPA9Fn5M-XHVWc6Fg
提取码zsy0

CSS基本知识及帮助文档相关推荐

Wcp知识管理系统部署文档
Wcp知识管理系统部署文档环境 CentOS-6.5-x86_64-bin-DVD1.iso jdk-7u79-linux-x64.tar.gz apache-tomcat-7.0.72.tar.g ...
项目经理成长之路---PMP、管理知识、项目文档、项目管理软件工具、PPT、WORD
项目经理成长之路---PMP.管理知识.项目文档.项目管理软件工具.PPT.WORD [1]PMP备考资料 | PMP备考九阴真经 --- 项目管理十大知识领域49个过程输入输出.工具与技术暨知识点汇 ...
泛微ecology 通过建模引擎导航树展示指定的知识目录展示文档应用场景
通过建模引擎导航树展示指定的知识目录展示文档应用场景实现的效果见下图: 第一部分:需求说明客户在系统使用过程中,针对公告信息想独立显示,公告目录下的文档信息,不需要从整个的知识库中区点击公告目录查 ...
知识管理、文档管理两手抓，全靠它！
知识管理和文档管理是两个相互关联的概念,两者之间的关系非常密切.知识管理是指对组织内外的知识资源进行收集.整理.存储.共享和应用的过程,旨在提高组织的绩效和创新能力.而文档管理是指对组织内外的文档资源 ...
通过css类/选择器选取元素文档结构和遍历元素树的文档
通过css类选取元素 html所有的元素拥有class属性,该属性会对元素进行分组,标识为某一组. js中使用className属性来保存HTML的class的属性值 var NodeList = d ...
【Hello CSS】第六章-文档流与排版
作者:陈大鱼头 github: KRISACHAN 正常流什么是"正常流"? 其实就是我们日常所说的"文档流". 在W3C官方文档里对应的是"nor ...
GIS基本知识学习PDF文档
章节内容目录:共70页.相同内容文档百度文库竟然售价30元,为了抵制这类不良行为,我是一页一页截取下来做成PDF,文末附下载链接,积分是平台给定的,我改不了,有需要者取,介意者出门右拐! 完整pdf文 ...
CSS盒模型、标准文档流、浮动
一.盒模型无论是div.span.a都是盒子,一个图片.表单元素一律看做文本看待. 二.标准文档流 1.块级元素霸占一行,不能和其他元素并列一行. 能接收宽高,设置宽高有效. 如果不设置宽高,宽高 ...

CSS基本知识及帮助文档

文章目录