一、CSS简介
CSS是级联样式表(Cascading Style Sheets)的缩写。HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现。
它包含了如:整个页面的布局,元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
内容HTML和表现CSS的分离在代码的撰写与维护过程中,内容如果和修饰分离,便于维护。
二、CSS的语法
基本语法及解释
一条CSS样式规则由两个主要的部分构成:选择器,以{}
包裹的一条或多条声明:
h1 {color:blue;front-size:12px}
h1是选择器
color;front-size:为属性
blue;12-px:值
这条规则表明,页面中所有的一级标题都显示为蓝色,字体大小为12像数。
选择器是您需要改变样式的对象(上图的规则就一级标题生效)。
每条声明由一个属性和一个值组成。(无论是一条或多条声明,都需要用{}包裹,且声明用;分割)
属性)是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
/*。。。。*/
为注释,其注释跟C语言中的注释一样,不同于HTML的注释
对于color,可以如上面所示选取颜色,当然也可以通过RGB来组件自己的颜色比如#ffffff,没两位代表一个颜色
分别是红绿蓝,可以设置16进制rgb来给颜色
对于font-size:分为像素点大小和%大小,一般对我们来说采取百分比更好一点,方便我们对图片的整体浏览。
对于默认的像素点来说是16px
选择器
有两种id和class,一般来说class用得更多一点儿(我在这里调试了class选择器)
id选择器是以#开头
id选择器适用范围只有一个元素
class选择器是以.开头
/*线路规划与排队状态 */
.state{
background: chocolate;
color: cyan;
}
.line{
background-color: crimson;
color:gold;
}
上面的代码给了背景和字体颜色
如下所示的页面:
<div class="state"><a href="#" target="_blank">各项目等待人数与等待时</a></div>
<div class='line'><a href="#" target="_blank">路线规划</a></div>>
三、CSS生效方式
(1)插入样式表的方法有三种:外部样式表、内部样式表、内联样式。
(2)外部样式表说明:
页面使用 标签链接到样式表。
在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,使用较为广泛。
(3)内部样式表说明:
单个文档需要特殊的样式时,就应该使用内部样式表,即直接放在htnl文件中,一般情况不使用。
(4)内联样式说明:
直接把样式规则直接写到要应用的元素中。
(5)级联的优先级:内联样式>内部样式表或外部样式表>浏览器默认样式
四、颜色尺寸等美化
(1)文本或背景颜色:可以使用16进制值、RGB值或者名称表示。
(2)尺寸:用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有:像数 px,百分比 %。
(3)对齐:元素中的文本,可以根据需求设置text-align属性为left, center, right。
五、盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外,这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
结构图:
说明:
Content 盒子的内容,如文本、图片等
Padding 填充,也叫内边距,即内容和边框之间的区域
Border 边框,默认不显示
Margin 外边距,边框以外与其它元素的区域
计算公式:
总宽度计算公式:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总高度最终计算公式:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
六、边框及边距
无论边框、内边距还是外边距,它们都有上下左右四个方向。
.example-1 {
border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
border: 1px solid grey;
border-radius: 15px; /* 边框圆角 */
}
.example-4 {
border-left: 5px solid purple;
}
边距
下面样式说明了内边距的设置:
padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式,按上,右,下,左顺序设置 */
padding: 25px 10px; /* 简写形式,上下为25px,左右为10px */
注:CSS边框属性允许指定一个元素边框的样式和颜色。
七、定位
(1)position属性用于对元素进行定位:
static 静态
relative 相对
fixed 固定
absolute 绝对
(2)static:
设置为静态定位position: static;
按照元素在 HTML出现的先后顺序从上到下,从左到右进行元素的安排。
(3)relative:
设置为相对定位position: relative;
元素相对于他的静态(正常)位置进行偏移。
(4)fixed:
设置为固定定位position: fixed;
元素固定不动
(5)absolute:
设置为绝对定位position: absolute;
元素相对于其最近设置了定位属性(非static)的父元素进行偏移。
八、浮动
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
九、不透明度
(1)用opacity对任何元素设置不透明度。
(2)值在[0.0~1.0]之间,值越低,透明度越高。
例如(分别为0.2 0.5 1.0):