目录
Css第一天
本章要点：
-
Css的概述
-
Css解决了什么问题?
-
Css的基础语言以及页面引用
-
Css文本、背景、字体、链接
-
Css颜色表示方法
-
Css列表及表格样式属性
-
Css轮廓样式属性
-
Css 选择器介绍以及使用
一、CSS 的概述
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一
二、CSS 解决了什么问题?
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式， 然后网站中的所有元素均会自动地更新。
三、CSS 的基础语言以及页面引用
CSS 的基本语法
Css 的定义方法是: 选择器 { 属性: 值 ; 属性: 值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：
div{ width:100px; height:100px; color:red }Css 页面引入的方法：
1．行内样式/内联样式：通过标签的 style 属性，在标签上直接写样式。
<div style="width:100px; height:100px; color:red "> </div> 2．内嵌样式：通过 style 标签在网页上创建嵌入的样式。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>3．外联样式：通过 link 标签，链接到外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css"> 四、Css文本及字体、链接、背景
1．Css文本及字体设计
常用的应用文本的css样式：
Ø color 设置文字的颜色，如： color:red;
Ø font-size 设置文字的大小，如：font-size:12px;
Ø font-family 设置文字的字体，如：font-family:'微软雅黑';
Ø font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
Ø font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
Ø font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';
Ø line-height 设置文字的行高，如：line-height:24px;
Ø text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
Ø text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
Ø text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
实例代码_01:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.continer{
width: 300px;
height: 300px;
/*设置边框*/
border: 1px solid red;
/*设置文本*/
/*font: normal 20px/30px "仿宋";*/
font-family: "仿宋";
font-size: 20px;
/*设置字体是否加粗*/
font-weight: normal;
/*设置行高(每一行的高度都为50px)*/
/*line-height: 50px;*/
/*如果只有一行内容,则可设置垂直居中 显示 且高度和元素高度一致*/
/*line-height: 300px;*/
/*设置元素水平居中显示*/
/*text-align: center;*/
/*设置文本颜色*/
color: orange;
/*设置文本缩进*/
/*text-indent: 50px;*/
}
a{
/*设置文本的上下划线是否显示 以下设置不显示*/
text-decoration: none;
}
</style>
</head>
<body>
<div class="continer">
学的不仅是技术更是<a href="#">梦想</a>,在牛逼的梦想也抵不住你傻逼似的坚持.
</div>
</body>
</html>2．背景设计
属性解释 ： background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
Ø background-color 设置背景颜色
Ø background-image 设置背景图片地址
Ø background-repeat 设置背景图片如何重复平铺
Ø background-position 设置背景图片的位置
Ø background-attachment 设置背景图片是固定还是随着页面滚动条滚动
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
实例代码_02**：** 下面这些例子使用下面这张图片做为背景图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实例代码_02</title>
<style type="text/css">
.continer{
width: 1000px;
height: 600px;
border: 2px solid black;
/*1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。*/
/*background: url(../img/logo1.png);*/
/*2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。*/
/*background:cyan url(../img/logo1.png) repeat-x;*/
/*3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。*/
/*background:cyan url(../img/logo1.png) repeat-y;*/
/*4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。*/
/*background:cyan url(../img/logo1.png) no-repeat;*/
/*5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。*/
/*background:cyan url(../img/logo1.png) no-repeat left center;*/
/*6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。*/
background:cyan url(../img/logo1.png) no-repeat right center;
}
</style>
</head>
<body>
<div class="continer"></div>
</body>
</html>1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。
2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。
3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。
五、颜色的表示方法
css 颜色值主要有三种表示方法：
1、颜色名表示，比如：red 红色，gold 金色
2、rgb 表示，比如：rgb(255,0,0)表示红色
3、16 进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
实例代码_03:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.continer{
width: 200px;
height: 200px;
/*第一种:颜色名字表示*/
background: orchid;
/*第二种: rgb表示*/
background: rgb(255,255,0);
/*第三种: 16进制表示*/
background: #DA70D6;
}
</style>
</head>
<body>
<div class="continer"></div>
</body>
</html>六、Css列表及表格样式
1．列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
实例代码_04:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实例代码_04</title>
<style type="text/css">
ul{
list-style: none;
}
li{
list-style-image: url(../img/tag_img.jpg);
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">实战项目</a></li>
<li><a href="#">师资团队</a></li>
<li><a href="#">学员作品</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>2．表格
| 属性 | 描述 |
|---|---|
| border-collapse | 设置是否把表格边框合并为单一的边框。 |
| border-spacing | 设置分隔单元格边框的距离。 |
| caption-side | 设置表格标题的位置。 |
| empty-cells | 设置是否显示表格中的空单元格。 |
实例代码_05:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实例代码_05</title>
<style type="text/css">
table{
border: 1px solid black;
width: 400px;
height: 200px;
/*设置是否把表格边框合并为单一的边框。 以下为合并单一*/
/*border-collapse: collapse;*/
/*设置分隔单元格边框的距离 为20px。*/
/*border-spacing: 20px;*/
/*设置表格标题的位置。 为下边*/
/*caption-side: bottom;*/
/*设置是否显示表格中的空单元格。 设置为hide隐藏 show为显示空的单元格*/
empty-cells: hide;
}
td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>英莱特科技学员信息统计表</caption>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>岗位</td>
</tr>
<tr>
<td>英莱特_01</td>
<td>男</td>
<td></td>
<td>Web前端工程师</td>
</tr>
</table>
</body>
</html>七、Css轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
| 属性 | 描述 | CSS |
|---|---|---|
| outline | 在一个声明中设置所有的轮廓属性。 | 2 |
| outline-color | 设置轮廓的颜色。 | 2 |
| outline-style | 设置轮廓的样式。 | 2 |
| outline-width | 设置轮廓的宽度。 | 2 |
实例代码_06:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实例代码_06</title>
<style type="text/css">
.continer{
width: 200px;
height: 200px;
border: 2px solid red;
/*添加该元素的轮廓*/
outline: 1px dashed black;
}
</style>
</head>
<body>
<div class="continer"></div>
</body>
</html>八、CSS 选择器的介绍以及使用
常用的选择器有如下几种：
1．标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：
*{margin:0;padding:0} div{color:red}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->2．id 选择器
通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用 id作为选择器。
举例：
#box{color:red}
<div id="box">....</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->3．类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多 个类，应用灵活，可复用，是 css 中应用最多的一种选择器。
举例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red"> </div>
<h1 class="red big mt10"> </h1>
<p class="red mt10"> </p>4．层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元 素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span> </span>
<a href="#" class="red"> </a>
</div>
<h3 class="red"> </h3>5．组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>6．伪类及伪元素选择器
常用的伪类选择器有 hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有 before 和 after,它们可以通过样式在元素中插入内容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
313
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
