前端三剑客——css 学习笔记
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>labeltitle>
head>
<body>
<div style="border:red solid 1px">早上好div>
<div style="border:red solid 1px">早起的鸟儿有虫吃div>
<span style="border:red solid 1px">biubiubiuspan>
<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>headtitle>
<style>
div{
border:1px red solid;
}
span{
border:1px red solid;
}
style>
head>
<body>
<div>aaaaaadiv>
<div>bbbbbbdiv>
<span>vvvvvvspan>
<span>ccccccspan>
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>Titletitle>
<link href="./Demo03Style.css" rel="stylesheet" type="text/css"/>
head>
<body>
<div>biubiubiudiv>
<div>dudududududiv>
<span>bengbengspan>
<span>huahuahuaspan>
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>IDSelectortitle>
<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">baidua>
<div>哈哈哈哈div>
<ul>
<li>hahahali>
<li>hahahali>
<li>hahahali>
<li>hahahali>
<li>hahahali>
ul>
<table >
<tr>
<td>1td>
<td>2td>
tr>
<tr>
<td>3td>
<td>4td>
tr>
table>
body>
html>