CSS笔记一（与CSS笔记二类似）
CSS概述
层叠样式表（Cascading Style Sheet）
Cascading Style Sheet : 层叠样式表（级联样式表）
作用：美化我们的页面的。
在实际的开发中，这段知识通常会有专业的人员来写。
所以，我们对此内容的要求就是，能够看懂样式。(可以借助api来查）
优点：
- 实现了样式和内容的分离，提高了显示效果和样式的复用性。
- 降低耦合性，分工更加明确，CSS专门用于美化，HTML专门用于结构搭建。
CSS基础语法：
HTML引入CSS
div{
font-size: 50px;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-HTML引入CSS</title>
<!--
（昨天html的课程中，我们介绍了html的主要组成，head标签内部一般都是一些声明，包括css和js的声明或者引入）
第二种：内嵌样式
使用<style>标签来定义样式。
type属性用于指定定义的内容
text/css 表示是 文本/样式表
它是用于抽取重复样式给多个标签服务的。
-->
<style type="text/css">
div{
border:1px dashed red;
color: chocolate;
}
</style>
<!--
第三种方式：引入外部样式
使用link标签
type:表示引入文件的类型
text/css 文本/样式表 （MIME类型）
rel：表示是样式表
href:表示样式文件的为准
-->
<link rel="stylesheet" type="text/css" href="./css/demo.css">
</head>
<body>
<!--
第一种：行内样式。
它是使用了标签的style属性。
它只能影响当前标签
-->
<div style="font-family: '楷体';color: darkblue">字体的变化</div>
<div>新的div</div>
</body>
</html>
CSS书写规范：
CSS的基础语法：
它的组成都是key:value的形式。
key指的是样式的名称
value指的是样式的值
名称和值之间用冒号分隔
多个样式它是用分好分隔
key:value;key:value
如果样式有多个值，每个值之间用空格分隔
例如：
border:1px dashed red
如果一个样式名称由多个单词组成，每个单词之间用减号分隔
例如：
font-family:"楷体"
样式的值通常字符类型的使用引号括起来
至于是单引号还是双引号，是由外层引号决定的。
外层引号是双引号，值就用单引号，反之外层引号是单引号，值就用双引号。
例如：
<div style="font-family: '楷体'">字体的变化</div>
<div style='font-family: "楷体"'>字体的变化</div>
如果是内嵌样式或者引入独立样式文件时
通常样式的值是不需要引号括起来的。
在定义内嵌样式或者外部样式文件时，
它需要用大括号{}把样式的内容括起来
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-CSS语法</title>
<style type="text/css">
span{
border:1px solid green;
font-family: 隶书;
}
</style>
</head>
<body>
<span>样式名多个单词用横杠分割</span>
<span>样式值多个单词用空格分割</span>
<span>多个样式之间，以分号分割</span>
</body>
</html>
基本选择器
css的选择器
概念：选择哪些标签使用样式。
基本选择器
标签选择器:
当指定了标签之后，所有此名称的标签样式都会受到影响。
如果是内嵌样式，影响的就是当前html，如果是引入外部样式，那么影响的就是所有引入的html
定义方式：
以html的标签名称作为选择器名称
id选择器
当定义了id选择器之后，id属性取值和选择器名称一致时，就受到样式影响。
定义方式：
以标签的id属性的值作为选择器名称，前面要加上#(别忘了声明时的#，引用时的id属性不需要写#)
类选择器
当定义了类选择器之后，所有标签class属性取值与选择器名称一致时，会受到样式影响。
定义方式
以class属性的取值为选择器名称，前面要加一个.（点）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-基本选择器</title>
<style type="text/css">
span{
font-size: 25px;
}
#boss{
border: 1px solid blue;
}
.female{
color: red;
}
.hero{
font-family: 楷体;
}
.male{
color:blue;
}
</style>
</head>
<body>
<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female hero">黑寡妇</span>
<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>
<span id="boss">灭霸</span>
</body>
</html>
扩展选择器
扩展选择器：
关系选择器
并列关系
定义方式：
使用html的标签来声明，当需要多个不同名称标签使用相同样式时，采用此选择器。
它是使用,分隔多个标签的。
父子关系
定义方式
使用html的标签来声明，当需要父子关系时，标签间用空格分隔。每多一个标签，就表示递进一层
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-扩展选择器</title>
<style type="text/css">
span,label,p{
font-size:25px;
}
div p{
color:red;
}
div span{
color:blue;
}
</style>
</head>
<body>
<div>
<span>烟幕弹</span>
<p>
<span id="gbl">高爆雷</span>
</p>
</div>
<span id="jjx">急救箱</span>
<br/>
<label>姓名</label>
<input type="text" name="userName" value="Jack"/><br/>
<label>密码</label>
<input type="password" name="userPass" value="123456"/><br/>
<p>段落标签</p>
</body>
</html>
CSS常用样式：
字体和文本属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-字体和文本属性</title>
<!--此种定义样方式可以，但是不规范。应该加上type="text/css"-->
<style>
/*
渲染需求
1.所有文字绿色
2.所有文字大小20px
3.所有行高40px
4.所有字体加粗
5.所有字体楷体
6.第一句文字倾斜
7.第一句隐藏下划线
*/
p,a{
color:green;
font-size:20px;
line-height: 40px;
font-weight: bold;
font-family: 楷体;
}
p a{
font-style: oblique;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<p>
<a href="#"> 学习的误区：</a><br/>
眼睛：看了一遍记住了<br/>
耳朵：听了一遍明白了<br/>
脑子：想了一遍搞懂了<br/>
手：你们会个屁！^_^ <br>
</p>
</div>
</body>
</html>
背景属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07-背景属性</title>
<style type="text/css">
/*样式中的背景设置：Background*/
div{
border: 1px solid gray;
width:100%;
height:300px;
}
#div1{
background-color: blue;
}
#div2{
background-image: url("./images/bgimage.jpg");
background-repeat: no-repeat;
background-position-x: right;
background-position-y: center;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
显示属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-显示属性</title>
<style type="text/css">
div,span{
border: 1px solid gray;
}
div{
height: 300px;
float: left;/*漂浮 左边 右边*/;
clear: both;
width: 100%;
}
#span3{
width: 100%;
float: left;/*漂浮 左边 右边*/;
height: 300px;
clear: both;/*清理周围的元素（标签），清理左边left ，清理右边right,清理两边 both*/
}
</style>
</head>
<body>
<span style="display: inline">内联标签span1</span>
<span style="display: inline">内联标签span2</span>
<span id="span3" >内联标签span3</span>
<div style="display: block">块级标签div1</div>
<div style="display: none">块级标签div2</div>
<div style="display: block">块级标签div3</div>
</body>
</html>
浮动属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>09-浮动属性</title>
<style>
.box{
width: 150px;
height: 150px;
border: 1px solid red;
text-align: center;
float: right;
clear:both;
}
/*
浮动属性：
float：指定当前元素漂浮的位置
clear: 指定当前元素两次是否允许有漂浮
div的定位
position属性：用于定位
absolute：绝对位置 它的定位点是从坐标左顶点开始定位（0,0）坐标点
relative：相对位置 它的定位点是从当前元素原来的位置开始定位坐标点
*/
#long{
position: absolute;
top:30px;
left: 30px;
}
#hu{
position: absolute;
top: 60px;
left: 60px;
}
#shu{
position: absolute;
top:90px;
left: 90px;
}
</style>
</head>
<body>
<div class="box" id="long">左青龙</div>
<div class="box" id="hu">右白虎</div>
<div class="box" id="shu">最后砍成米老鼠</div>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10-盒子模型</title>
<style type="text/css">
#lw{
padding-left: 15px ;
}
.box{
border:3px solid red;
margin-top: 100px;
border-radius: 50%;
}
/*
table{
margin-bottom: 35px;
}
*/
</style>
</head>
<body>
<!--
盒子模型：
它是由内边距，外边距和边框组成的。
外边距：
属性是margin
内边距
属性是padding
边框
属性是border
他们都是和盒子模型相关的
cellspacing：设置单元格的外边距
cellpadding：设置单元格的内边距
-->
<table border="1" align="center" width="500px" height="350px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>生日</th>
</tr>
<tr>
<td>1</td>
<td align="center">泰斯特</td>
<td>18</td>
<td>男</td>
<td>1990-01-01</td>
</tr>
<tr>
<td>2</td>
<td id="lw">老王</td>
<td>45</td>
<td>男</td>
<td>1975-01-01</td>
</tr>
<tr>
<td>3</td>
<td>小孙</td>
<td>23</td>
<td>女</td>
<td>1997-02-05</td>
</tr>
</table>
<div class="box">
<img src="../img/girl.jpg" width="300px" height="300px" alt="">
</div>
</body>
</html>
CSS笔记二（与CSS笔记一类似）
CSS简介
1、什么是CSS，有什么作用？
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
CSS好比是HTML的化妆品一样。
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。
2、CSS我们要求掌握到什么程度？
* 常见的CSS样式要求会写。
* 别人写的CSS样式要能看懂。
3、在HTML页面中嵌套使用CSS的三种方式：
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式：
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
<!doctype html>
<html>
<head>
<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
</head>
<body>
<!--
width 宽度样式
height 高度样式
background-color 背景色样式
display 布局样式（none表示隐藏，block表示显示）
-->
<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
border-color : red;border-width : 1px;border-style : solid;"></div>
<br><br>
<!--
样式还能这样写：
border : 1px solid black;
-->
<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
border : 1px solid black;"></div>
</body>
</html>
第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
语法格式：
<head>
<style type="text/css">
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
</style>
</head>
<!doctype html>
<html>
<head>
<title>HTML中引入CSS样式的第二种方式：样式块</title>
<style type="text/css">
/*
这是CSS的注释。
*/
/*
id选择器
语法格式：
#id{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
*/
#usernameErrorMsg {
color : red;
font-size : 12px;
}
/*
标签选择器
语法格式：
标签名 {
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
标签选择器作用的范围比id选择器广。
*/
div {
background-color : black;
border : 1px solid red;
width : 100px;
height : 100px;
}
/*
类选择器
语法格式：
.类名{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
*/
.student {
border : 1px solid red;
width : 400px;
height : 30px;
}
</style>
</head>
<body>
<!--
设置样式字体大小12px，颜色为红色！
-->
<span id="usernameErrorMsg">对不起，用户名不能为空！</span>
<div></div>
<div></div>
<div></div>
<!--class相同的标签可以认为是同一类标签。-->
<br><br><br>
<input type="text" class="student"/>
<br><br><br>
<select class="student">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
第三种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上
直接引入css文件，样式就引入了）
语法格式：
<link type="text/css" rel="stylesheet" href="css文件的路径" />
这种方式易维护，维护成本较低。
xxx.css文件
1.html中引入了
2.html中引入了
3.html中引入了
4.html中引入了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>
<!--引入css-->
<link rel="stylesheet" type="text/css" href="css/1.css" />
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baiduSpan">点击我链接到百度哦！</span>
</body>
</html>
列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
ul{
/*list-style-type: none;*/
/*list-style-type: circle ;*/
list-style-type: square ;
}
</style>
</head>
<body>
<ul>
<li>中国
<ul>
<li>北京</li>
<li>上海</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>俄国</li>
</ul>
</body>
</html>
CSS样式的绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式的绝对定位</title>
<style type="text/css">
#div1{
background-color: red;
border: 1px black solid;
width: 300px;
height: 300px;
position : absolute; /*绝对定位*/
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
扫一扫
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
