CSS基础入门
CSS基础入门
1.官方文档
1.CSS 指的是层叠样式表* (Cascading Style Sheets)
2.地址: https://www.w3school.com.cn/css/index.asp
2.为什么需要 CSS
1.在没有 CSS 之前，我们想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性，费心费力。所以 CSS 就出现了。
2.使用 CSS 将 HTML 页面的 内容与样式分离提高 web 开发的工作效率(针对前端开发)
3.CSS 可以让 html 元素(内容) + 样式(CSS)分离，更好的控制页面
3.CSS快速入门
1.应用实例 simple_css.html, 使用 css 完成下面页面
- 需求: 创建simple_css.html 完成如下网页显示
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 快速入门title>
<style type="text/css">
div{
width: 300px;
height: 100px;
background-color: aquamarine;
}
style>
head>
<body>
<div>hello, 北京div>
<br/>
<div>hello, 上海div>
<br/>
<div>hello, 天津div>
body>
html>
4.CSS 语法
1.CSS 语法可以分为两部分： (1)选择器 (2)声明
2.声明由属性和值组成，多个声明之间用分号分隔
3.说明：最后一条声明可以不加分号(建议加上)
4.一般每行只描述一个属性
5.CSS 注释：/*注释内容*/, 类似 java
5.常用样式-字体颜色
1.介绍
颜色可以写颜色名 比如 green，也可以写 rgb 值(三原色) 比如 rgb(200,200,200)和十六进制表示
值 比如 #708090
2.应用实例 color.html
1.修改 color.hml, 完成如下页面.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色title>
<style type="text/css">
/*
说明:
颜色可以写颜色名 比如 green，
也可以写 rgb 值 比如 rgb(200,200,200)
和十六进制表示值 比如 #708090
color: rgb(255, 222, 1); //color: #ff7d44; //color: red;
*/
div {
/*有三种方式，指定颜色
1. 英文
2. 16进制 #ff7d44 [使用最多]
3. 三原色 rgb(1,1,1)
*/
color: #ff7d44;
}
style>
head>
<body>
<div>css 颜色字体div>
body>
html>
6.常用样式-边框 border
1.应用实例 border.html
1.修改 border.html, 完成如下页面.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框title>
<style type="text/css">
div {
/*具体的像素*/
width: 300px;
height: 100px;
/*border表示边框 dashed表示虚线 blue表示蓝色*/
border: 1px dashed blue;
}
style>
head>
<body>
<div>css borderdiv>
body>
html>
7.常用样式-宽度 width/高度 height
1.介绍
宽度/高度像素值：100px； 也可以是百分比值：50%；
2.应用实例，看前面案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框title>
<style type="text/css">
div {
/*width: 300px; 具体的像素*/
width: 50%; /*百分比*/
height: 100px;
/*border表示边框 dashed表示虚线 blue表示蓝色*/
border: 1px dashed blue;
}
style>
head>
<body>
<div>css borderdiv>
body>
html>
8.常用样式-背景颜色
1.应用实例 bg.html
1.需求: 编写代码，修改 bg.html 显示如下网页.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景title>
<style>
div {
width: 200px;
height: 100px;
background-color: #ff7d44;
}
style>
head>
<body>
<div>css backgroundcolordiv>
body>
html>
9.常用样式-字体样式
1.介绍
- font-size: 指定大小，可以按照像素大小
- font-weight : 指定是否粗体
- font-family : 指定类型
2.应用实例 font-style.html
- 需求, 修改 font-sytle.html , 显示如下网页
- 代码实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式title>
<style type="text/css">
/*
说明:
1. font-size: 指定大小，可以按照像素大小
2. font-weight : 指定是否是粗体
3. font-family : 指定字体类型
*/
div {
border: 1px solid black;
width: 300px;
font-size: 40px;
font-weight: bold;
font-family: 华文新魏;
}
style>
head>
<body>
<div>css 字体样式div>
body>
html>
10.常用样式-DIV 居中
1.应用实例 div-center.html
- 需求，修改 div-center.html, div 居中效果
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div居中显示title>
<style type="text/css">
/*
说明:
1. font-size: 指定大小，可以按照像素大小
2. font-weight : 指定是否是粗体
3. font-family : 指定字体类型,前提是电脑上安装有响应的字体
4. margin-left margin-right 如果设置为auto, 表示左右居中
*/
div {
border: 1px solid black;
width: 300px;
font-size: 40px;
font-weight: bold;
font-family: 微软雅黑;
margin-left: auto;
margin-right: auto;
}
style>
head>
<body>
<div>css 字体样式 div居中显示div>
body>
html>
11.常用样式-文本居中
1.应用实例 text-center.html
1.需求，修改 text-center.html , 显示如下网页
2.代码实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本居中显示title>
<style type="text/css">
/*
说明:
1. font-size: 指定大小，可以按照像素大小
2. font-weight : 指定是否是粗体
3. font-family : 指定字体类型
4. margin-left margin-right 如果设置为auto, 表示左右居中
5. text-align: center 表示文本居中
*/
div {
border: 1px solid black;
width: 300px;
font-size: 40px;
font-weight: bold;
font-family: 华文新魏;
margin-left: auto;
margin-right: auto;
text-align: center;
}
style>
head>
<body>
<div>文本内容居中显示div>
body>
html>
12.常用样式-超链接去下划线
1.应用实例 link_none.html
1.需求，修改 link_none.html, div 居中效果
2.代码实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接去掉下划线title>
<style type="text/css">
a {
text-decoration: none;
}
style>
head>
<body>
<a href="http://www.baidu.com">点击到百度a>
body>
html>
13.常用样式-表格细线
1.应用实例 table-collapse.html
1.需求，修改 table-collapse.html, 实现如下效果
2.代码实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格细线title>
<style type="text/css">
/*
table, tr, td组合选择器
设置边框 : border: 1px solid black
将边框合并: border-collapse: collapse;
指定宽度： width
设置边框： 给 td, th 指定即可 border: 1px solid black;
说明
1. table, tr, td 表示组合选择器
2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性·
*/
table, tr, td {
width: 300px;
border: 1px solid black;
border-collapse: collapse;
}
style>
head>
<body>
<table>
<tr>
<td align=center colspan="3">星期一菜谱td>
tr>
<tr>
<td rowspan=2>素菜td>
<td>青草茄子td>
<td>花椒扁豆td>
tr>
<tr>
<td>小葱豆腐td>
<td>炒白菜td>
tr>
<tr>
<td rowspan=2>荤菜td>
<td>油闷大虾td>
<td>海参鱼翅td>
tr>
<tr>
<td>红烧肉td>
<td>烤全羊td>
tr>
table>
body>
html>
14.常用样式-列表去修饰
1.应用实例 ul-none.html
1.需求，修改 ul_none.html, 完成如下网页显示
2.代码实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表去修饰title>
<style type="text/css">
ul {
/*说明:list-style:none表示去掉默认的修饰*/
list-style: none;
}
style>
head>
<body>
<ul>
<li>三国演义li>
<li>红楼梦li>
<li>西游记li>
<li>水浒传li>
ul>
body>
html>
15.CSS 使用三种方式
1.方式 1：在标签的 style 属性上设置 CSS 样式
1.应用实例 修改 1.use-css-style.html , 看使用效果
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在标签的 style 属性上设置CSS样式title>
head>
<body>
<div style="width: 300px;height: 100px;background-color: red">hello, 北京div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 上海div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 天津div>
<br/>
body>
html>
- 问题分析
- 标签多了。样式多了，代码量庞大
- 可读性差
- CSS 代码没有复用性
2.方式 2：在 head 标签中，使用 style 标签来定义需要的 CSS 样式
1.应用实例 修改 2.use-css-style.html , 看使用效果
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在 head 标签中，使用 style 标签来定义需要的 CSS 样式title>
<style type="text/css">
div {
width: 300px;
height: 100px;
background-color: beige;
}
span {
border: 1px solid red;
}
style>
head>
<body>
<div>hello, 北京div>
<br/>
<div>hello, 上海div>
<br/>
<span>hello, spanspan>
body>
html>
问题分析
- 只能在同一页面内复用代码维护不方便，
- 实际项目中会有很多页面，需要到对应页面去修改。工作量大
3.方式 3：把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入
1.应用实例 创建 test.css 和 修改 3.use-css-style.html , 演示使用
div {
width: 200px;
height: 100px;
background-color: red;
}
span {
border: 2px dashed blue;
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入外部的css文件title>
<link rel="stylesheet" href="./css/my.css" />
head>
<body>
<div>hello, 北京~div>
<br/>
<div>hello, 上海div>
<br/>
<span>hello, spanspan>
body>
html>
2.第三种方式是我们推荐使用的.
16.CSS 选择器
1.CSS 元素选择器
- 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
- CSS 元素/标签选择器通常是某个 HTML 元素， 比如 p、h1、a div 等
- 比如:
- 应用实例 修改 element-selector.html
2.ID 选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- id 选择器以 “#” 来定义。
- 比如:
-
应用实例 修改 id-selector.html, 演示使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id 选择器title>
<style type="text/css">
#llp {
color: gold;
}
#css2 {
color: green;
}
style>
head>
<body>
<h1 id="llp">llph1>
<p id="css2">hello, world~p>
body>
html>
3.class 选择器（类选择器）
- class 类选择器，可以通过 class 属性选择去使用这个样式
- 基本语法
- 应用实例 修改 class-selector.html,演示如何使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器title>
<style type="text/css">
.css1 {
color: red;
}
.css2 {
color: sandybrown;
}
style>
head>
<body>
<div class="css1">llpdiv>
<div class="css1">llp1110div>
<p class="css2">hello, world~p>
body>
html>
4.组合选择器
- 组合选择器可以让多个选择器共用同一个 css 样式代码
- 语法格式
- 应用实例 修改 all-selector.html, 演示如何使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
/*
组合选择器的基本语法:
选择器 1，选择器 2，选择器 n{ 属性：值; }
*/
.class01,#id01 {
width: 300px;
height: 100px;
border: 2px solid red;
}
style>
head>
<body>
<div class="class01">llp1110div>
<p id="id01">hello, world~p>
body>
5.优先级说明
行内样式 > ID 选择器 > class 选择器 > 元素选择器