1. 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生.
2. CSS (Cascading Style Sheets) 层叠样式表.
3. 有了CSS,html种大部分表现样式的标签就直接废弃不用了,html就值负责文档结构和内容,表现形式完全交给CSS.
css基本语法及页面应用
css基本语法
1. css的定义方法是： 选择器 { 属性:值; 属性:值; 属性:值;}
2. 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。
<!-- code01_css的引入.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入</title>
<link rel="stylesheet" href="./css/mian.css">
</head>
<body>
<div id="div01">这是一个div</div>
</body>
</html>
/* css/main.css*/
#div01{
width: 100px;
height: 100px;
/* 字体的默认大小为16 */
font-size: 20px;
color: red;
}
css页面引入方式
css由三种引入页面的方式
<link><style>标签的style属性
1. 外联式：通过link标签，链接到外部样式表到页面中。
(1) <link rel="stylesheet" type="text/css" href="css/main.css">
(2) 主要是 href 这个属性
2. 嵌入式：通过style标签，在网页上创建嵌入的样式表。
(1) <style type="text/css"> ... </style>
(2) 一般网站的首页会选择内嵌CSS,因为加载会相对快一些
3. 内联式: 通过标签的style属性，在标签上直接写样式。
(1) <div style="width:100px; height:100px; color:red "> ... </div>
/* css/main.css*/
#div01{
width: 100px;
height: 100px;
/* 字体的默认大小为16 */
font-size: 20px;
color: red;
}
<!-- code02_css三种引入方式.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css三种引入方式</title>
<!-- 第一种,link外部引入 -->
<link rel="stylesheet" href="./css/main.css">
<!-- 第二种,使用<style>内嵌 -->
<style type="text/css">
#div02{
color: darkblue;
background-color: bisque;
}
</style>
</head>
<body>
<div id="div01">这是一个div,这是使用<link>引入的样式</div>
<div id="div02">这是一个div,这是使用<style>引入的样式</div>
<div id="div03" style="color: blueviolet;">这是一个div,这是使用标签的style属性引入的样式</div>
</body>
</html>
css文本设置
1. color 设置文字的颜色，如： color:red;
(1) color就是文字的颜色,不是 font-color,也没有 font-color
2. font-size 设置文字的大小，如：font-size:12px;
3. font-family 设置文字的字体，如：font-family:‘微软雅黑‘;
4. font-style 设置字体是否倾斜，如：font-style:‘normal‘; 设置不倾斜，font-style:‘italic‘;设置文字倾斜
(1) 一般是用来设置字体不倾斜
(2) em{ font-style: normal } i{ font-style:normal } (这些标签本来就是带有样式的,现在相当于手动取消了样式)
5. font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
(1) h1{ font-weight: normal }
6. line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
(1) line-height的理解是从这行文字的底部到上行文字的底部
7. font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；
(1) 如： font:normal 12px/36px ‘微软雅黑‘;
8. text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
(1) <a href="#" style="text-decoration:none;"></a> => 取消超链接的下划线
9. text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
(1) div{ font-size=22px; text-indent: 44px; }
10. text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
<!-- code03_常用文本样式.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>css中常用文本样式</title>
<style type="text/css">
div {
color: pink; /* 字体颜色 color */
font-size: 20px; /* 字体大小 font-size 默认16px */
/* 字体的格式 font-family */
font-family: Arial, Helvetica, sans-serif;
/* 设置文字是否倾斜 font-style */
font-style: italic;
/* 设置文字是否加粗 font-weight */
font-weight: bold;
/* 设置文字行高 line-height */
line-height: 40px;
/* 设置首行空格 text-indent*/
text-indent: 40px;
/* 设置文本对齐方式 text-align 默认是left */
text-align: center;
}
#div01 #span01 {
font-size: 30px;
color: blue;
font-style:normal;
}
</style>
</head>
<body>
<div id="div01">
大部分的数据都来自已有的数据库，如果没有的话也可以交给很多<span id="span01">爬虫工程师</span>去采集，来提供。
<br />也可以来自平时的记录，反正数据无处不在，大都是可用的。
</div>
</body>
</html>
css颜色表示法
css中有三种表示颜色的方式
rgb 是表示三种光的颜色
取色的话要借助取色器来取色
1. 颜色名表示，比如：red 红色，gold 金色
(1) 只要基础一些常见的颜色单词
2. rgb表示，比如：rgb(255,0,0)表示红色
3. 16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
(1) 其实最多的就是这中16进制RGB
css选择器
常用的css选择器就6种
标签,id,类,层次,组,伪类及伪元素
标签选择器
标签名{...}
标签选择器影响范围大,建议尽量应用在层级选择器种
/* *是选择全部的标签 */
*{margin:0;padding:0}
/* div是选择全部的div标签 */
div{color:red}
id选择器
#id名称{...}
通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对于页面的一个元素
id名一般给程序使用,所以css的话不推荐使用id作为选择器(类选择器在css中可复用)
#box{color:red}
/*
<div id="box">....</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
*/
类选择器
.类名称{...}
通过类名来选择元素,一个类可以应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用
类选择是css应用最多的一种选择器
id就算写重复了也不会报错.... html本来就是弱语法....知识口头约束不要这么写
/* 先写好类选择器,然后再html中使用 => 实现了样式的复用 */
.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>
*/
层级选择器
父选择器 子选择器 子子选择器{...}
主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用
使用层级选择器帮助减少命名,同时也通过层级,防止命名冲突
.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>
*/
组选择器
选择器1,选择器2,...,选择器n{...}
多个选择器,如果有同样的样式设置,可以使用组选择器
.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>
*/
伪类和伪元素选择器
选择器:伪类/元素{...}=> 伪类可以理解为事件触发的样式
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态
伪元素选择器有before和after,它们可以通过样式在元素中插入内容
/* 伪类选择器记住 hover即可 */
.box1:hover{color:red}
/* 伪元素选择器知道 before 和 after 即可 */
.box2:before{content:‘行首文字‘;}
.box3:after{content:‘行尾文字‘;}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
<!-- code05_伪类_伪元素选择器.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>伪类_伪元素选择器</title>
<style type="text/css">
/* 写css也要有面向对象的实现... 封装样式 */
.link {
font-size: 30px;
text-decoration: none;
color: green;
}
/* 现在加上一个hover事件的样式 */
.link:hover {
font-weight: bold;
color: gold;
}
.input:hover {
background-color: gold;
}
.input:focus {
background-color: rgb(0, 255, 213);
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="link">百度</a><br />
First name: <input type="text" name="fname" class="input" /><br />
Last name: <input type="text" name="lname" class="input" /><br />
</body>
</html>