介绍
为什么需要:
- 在没有 CSS 之前,想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性,费心费力;
- CSS 可以让 html 元素(内容) + 样式(CSS)分离,提高web 开发的工作效率(针对前端开发),从而更好的控制页面。
CSS是什么:
- CSS 指的是层叠样式表* (Cascading Style Sheets);
- 在head标签内,出现,表示要写css内容。
- css的注释是 /* */
- CSS 教程
注意:在调试css时,可以通过修改颜色,或者大小来看;
css 快速入门
div {
width: 200px;
height: 100px;
background-color: red;
}
说明:
- div{} 表示对HTML中的div元素进行样式的指定,当运行页面时,div元素就会被 div{} 渲染、修饰;
- width: 200px(属性):表示对div样式的具体指定, 可以有多个;如果有多个,使用; 分开即可。
- 最后属性可以没有; 但是建议写上。
语法
CSS 语法可以分为两部分:
说明:一般每行只描述一个属性;
CSS选择服务器托管网器
h1 {
color: beige;
}
p {
color: blue;
}
#hsp1 {
color: gold;
}
#css2 {
color: green;
}
/*
组合选择器的基本语法:
选择器 1,选择器 2,选择器 n{ 属性:值; }
*/
.class01, #id01 {
width: 300px;
height: 100px;
border: 2px solid red;
}
.css1 {
color: red;
}
.css2 {
color: sandybrown;
}
Ja服务器托管网va教育01
hello, world~
Java教育02
hello, world~
Java教育03
hello, world~
Java教育05
hello, world~
常用样式
边框border
div {
width: 50%;
height: 100px;
border: 1px dashed blue;
}
/style>
说明:宽度/高度: 像素值: 100px; 也可以是百分比值: 50%;
背景颜色
div {
width: 200px;
height: 100px;
background-color: #ff7d44;
}
字体样式
div {
color: #ff7d44;
}
1. font-size: 指定大小, 可以按照像素大小
2. font-weight : 指定是否粗体
3. font-family : 指定类型
指定字体颜色的3种方式
- 1. 英文(red)
- 2. 16 进制 #ff7d44 [使用最多]
- 3. 三原色 rgb(1,1,1)
div居中:
- margin-left : auto 表示左居中
- margin-right : auto 表示右居中
文本居中: text-align: center;
超链接去下划线: text-decoration: none;
表格细线
- 设置边框: border: 1px solid black
- 将边框合并: border-collapse: collapse;
- 指定宽度: width
- 设置边框:给td, th 指定即可border: 1px solid black;
1.table, tr, td 表示组合选择器
2.table 和tr 还有td ,都用统一的样式指定, 可以提高复用性
列表去修饰: list-style: none;
表格细线
/*
设置边框 : border: 1px solid black
将边框合并: border-collapse: collapse;
指定宽度: width
设置边框: 给 td, th 指定即可 border: 1px solid black;
1. table, tr, td 表示组合选择器
2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性
*/
table, tr, td {
width: 300px;
border: 1px solid black;
border-collapse: collapse;
}
ul {
/*说明:list-style:none表示去掉默认的修饰*/
list-style: none;
}
使用
方式一
在标签的 style 属性上设置 CSS 样式;
弊端
- 标签多了。样式多了,代码量庞大
- 可读性差
- CSS 代码没有复用性
在标签的 style 属性上设置CSS样式
hello, 北京
hello, 上海
hello, 天津
方式二
在 head 标签中, 使用 style 标签来定义需要的 CSS 样式;
弊端
- 只能在同一页面内复用代码维护不方便,
- 实际项目中会有很多页面,需要到对应页面去修改。工作量大
在 head 标签中,使用 style 标签来定义需要的 CSS 样式
div {
width: 300px;
height: 100px;
background-color: beige;
}
span {
border: 1px solid red;
}
hello, 北京
hello, 上海
hello, span
方式三–推荐方式
把 CSS 样式写成单独的 CSS 文件, 再通过 link 标签引入;
语法:
引入外部的css文件
hello, 北京~
hello, 上海
hello, span
//my.css文件
div {
width: 200px;
height: 100px;
background-color: red;
}
span {
border: 2px dashed blue;
}
说明:
href 表示要引入的css文件的位置,可以是web的完整路径;
type=”text/css” 可以有,也可以不写;
rel:relation 关联,它描述了当前页面与href所指定文档的关系;
- 即指明你链进来的对象是个什么东西
- 只有 rel 属性的 “stylesheet” 值得到了所有浏览器的支持。其他值只得到了部分地支持;
各个属性值
- Alternate — 定义交替出现的链接 /文档的替代版本(比如打印页、翻译或镜像)
- Stylesheet — 定义一个外部加载的样式表 ,关联的是一个样式表(stylesheet)文档; 它表示这个link在文档初始化时将被使用
- Start — 通知搜索引擎,文档的开始
- Next — 记录文档的下一页.(浏览器可以提前加载此页)
- Prev — 记录文档的上一页.(定义浏览器的后退键)
- contents 文档的目录。
- index 文档的索引。
- glossary 在文档中使用的词汇的术语表(解释)。
- copyright 包含版权信息的文档。
- chapter 文档的章。
- section 文档的节。
- subsection 文档的小节。
- appendix 文档的附录。
- help 帮助文档。
- bookmark 相关文档。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net