一、CSS技术介绍
CSS(Cascading Style Sheet)是层叠样式表单,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
二、语法规则
选择器 {
属性:值;
}
选择器:浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签)。
属性是你要改变的样式名,并且每个属性都有一个值,属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的声明(declaration)。
多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。一般每行只描述一个属性。
三、CSS和HTML的结合方式
1.第一种
在标签的style属性上设置"key:value value;",修改标签样式。
缺点:
- 如果标签多了,样式多了,代码量非常庞大。
- 可读性非常差
- CSS代码没什么复用性
2.第二种
在head标签中,使用style标签来定义各种自己需要的CSS样式
格式如下:
XXX {
Key : value value;
}
CSS的代码注释为:/* */
缺点:
- 只能在同一页面内复用代码,不能在多个页面中复用CSS代码;
- 维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改,工作量太大。
3.第三种
把CSS样式写成一个单独的CSS文件,再通过link标签引入即可复用。
link标签专门用来引入CSS样式代码。
四、CSS选择器
1.标签名选择器
格式:
标签名 {
属性: 值;
}
作用:可以决定哪些标签被动地使用这个样式。
2.id选择器
格式:
#id属性值 {
属性值 : 值;
}
id选择器可以让我们通过id属性选择性的去使用这个样式。
3.class选择器
格式:
.class属性值 {
属性:值;
}
class类型选择器,可以通过有效的选择性地去使用这个样式
4. 组合选择器
格式:
选择器1,选择器2,选择器n {
属性:值;
}
组合选择器可以让多个选择器共用同一个CSS样式代码。
五、常用样式
- 字体颜色:如color:red;
颜色可以写颜色名,如:black,red,green等;也可以写rgb值和十六进制表示值,如:rgb(255,0,0),#00F6DE,如果写十六进制必须加# - 宽度:如width:19px;
宽度可以写像素值:10px;
也可以写百分比值:20% - 高度:如height:20px;
高度可以写像素值:10px;
也可以写百分比值:20% - 背景颜色:如background-color:#0F2D4C
- 字体样式
color:#FF0000;字体颜色红色
font-size:20px;字体大小 - 红色1像素实线边框
border:1px solid red; - div居中
margin-left:auto;
margin-right:auto; - 文本居中
text-align:center; - 超链接去下划线
text-decoration:none; - 表格细线
table {
border: 1px solid black;/*设置边框*/
border-collapse: collapse;/*将边框合并*/
}
td,th {
border: 1px solid black;/*设置边框*/
}
- 列表去除修饰
ul {
list-style:none;
}