CSS技术简单的阐述
笔记是为了方便复习回顾用
笔记来源是b站尚硅谷讲解的javaweb教程
1、介绍
css是层叠样式表单。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
2、语法规则
- 选择器:浏览器根据“选择器”决定受css样式影响的HTML元素(标签)
- 属性(property)是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration)例如P{color:blue}
- 多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的末尾可以不加分号(但尽量在每条声明的末尾都加上分号)
p{
color:blue;
font-size:30px;
}
- 注:一般每行只描述一个属性
- css的注释:/* 注释内容 */
3.css与html的结合方式
3.1第一种
在标签的style属性上设置“key:value value;”修改标签样式
- 出题:分别定义两个div,span标签,分别修改每个div和span标签的样式为:边框一个像素,实线,红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label</title>
</head>
<body>
<div style="border:red solid 1px">早上好</div>
<div style="border:red solid 1px">早起的鸟儿有虫吃</div>
<span style="border:red solid 1px">biubiubiu</span>
<span style="border:red solid 1px">好看的皮囊千篇一律,有趣的灵魂万中无一</span>
</body>
</html>
实现:
-
由此也可以看出div和span标签的特性,div标签独占一行,span标签的长度和标签内文本的长度一样
这种方法的缺点:
1)如果标签多了。样式多了。代码量非常庞大
2)可读性非常差
3)css代码没有什么可复用性可言
3.2第二种
在head标签中,使用style标签来定义各种自己需要的css样式。
格式如下:
xxx{
key: value value
}
使用这种方式的代码,实现第一种方法中的题目
<html lang="en">
<head>
<meta charset="UTF-8">
<title>head</title>
<style>
div{
border:1px red solid;
}
span{
border:1px red solid;
}
</style>
</head>
<body>
<div>aaaaaa</div>
<div>bbbbbb</div>
<span>vvvvvv</span>
<span>cccccc</span>
</body>
</html>
实验结果和1,一摸一样
- 这种方式存在的缺点:
- 只能在同一个页面内复用代码,不能再多个页面中复用css代码
- 维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量就太大了
3.3第三种
把css样式写成一个单独的css文件,再通过link标签引入即可复用。
使用html的< link rel=“stylesheet” type=“text/css” href="./sytles.css"/>标签,导入css样式文件。
css样式文件
div{
border:1px red solid;
}
span {
border:1px red solid;
}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- link标签专门用来引入css样式代码-->
<link href="./Demo03Style.css" rel="stylesheet" type="text/css"/>
<!-- link标签中:
href:设置或获取目标的URL
rel:定义当前文档与被链接文档之间的关系,stylesheet即代表css样式表
type:定义当前文本内容以层叠样式表(CSS)来解析
media:设置或获取媒体类型
-->
</head>
<body>
<div>biubiubiu</div>
<div>dududududu</div>
<span>bengbeng</span>
<span>huahuahua</span>
</body>
</html>
4.css选择器
4.1标签名选择器
格式
标签名{
属性:值;
}
标签名选择器,可以决定哪些标签被动的使用这个样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签名选择器</title>
<style>
div{
border:red 1px solid;
color:yellow;
font-size:30px;
}
span{
border:blue 5px dashed;
color:green;
font-size:30px;
}
</style>
</head>
<body>
<div>我占单独一行</div>
<span>我好困阿</span>
<span>要睡着了,打起精神来啊!</span>
</body>
</html>
实现截图:
4.2id选择器
id选择器的格式是
#id编号{ 属性:值;}注:'{'前面的格式是“# + id +编号"编号就是1,2,34之类的
id选择器,可以让我们通过id属性选择性的去使用这个样式。
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IDSelector</title>
<style>
#id1{
color:gray;
font-size:20px;
border: 8px blue dashed;
}
#id2{
color:gold;
font-size:30px;
border:5px fuchsia solid;
}
</style>
</head>
<body>
<div id="id1">好好学习啊!优秀的人那么多,不学习以后怎么办啊!</div>
<span id="id2">加油,努力呀!</span>
</body>
</html>
4.3 class选择器(类型选择器)
class类型选择器的格式是
class类型{ 属性:值;}
class类型选择器,可以通过class属性有效的去使用这个样式
写一个具体实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style>
.first{
color:royalblue;
font-size:20px;
border:3px yellowgreen solid;
}
.class1{
color:brown;
font-size:30px;
border:4px aqua dashed;
}
</style>
</head>
<body>
<div class="first">样式选择器是 ”. + 类型名称“</div>
<p class="class1" align="center">没想到吧</p>
</body>
</html>
实现截图:
4.4组合选择器
组合选择器的格式似是:
选择器1,选择器2,选择器n{ 属性:值;}
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
.class1,#id01{
color:darkorange;
font-size:20px;
border:3px blue solid;
}
</style>
</head>
<body>
<div id="id01">idea专业版好用,但是我一直嫖好麻烦</div>
<span class="class1">啊!我还好多作业啊!但是一点也不想做,好麻烦啊!</span>
</body>
</html>
4.5css常用样式:
1、字体颜色颜色
- color:red;
2、宽度
- width:19px;
- 宽度可以写像素值:19px
- 也可以写百分比值:20%
3.高度
- height:20px;
- 和宽度一样也是可以写像素值和百分比
4、字体样式
- color:#FF0000:字体颜色为红色
- font-size:20px; 字体大侠
5、红色1像素实线边框
- border:1px solid red;
- 虚线是dashed
6、DIV居中
- margin-left:auto
- margin-right:auto
7、背景颜色
- backgroud-color:yellow;
8、文本居中
- text-align:center;
9、超链接去下划线
- text-decoration:none;
10、表格细线
table{
border:1px solid black;/*设置边框*/
border-collapse:collapse;/*将边框合并*/
}
td,th{
border-collapse:collapse;/*将边框合并*/
}
11、列表除去修饰
ul{ list-style:none;}
对以上所有的样式做一个编写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他常用样式</title>
<style>
div{
color:blue;
border:1px green solid;
width:300px;
height:300px;
background:gold;
font-size:40px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
a{
text-decoration:none;
}
table{
border:1px orange solid;
border-collapse:collapse;
}
td{
border:1px orange solid;
}
ul{
list-style:none;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">baidu</a>
<div>哈哈哈哈</div>
<ul>
<li>hahaha</li>
<li>hahaha</li>
<li>hahaha</li>
<li>hahaha</li>
<li>hahaha</li>
</ul>
<table >
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>