CSS总结
目录
-
-
- 1.CSS概述
- 2.CSS语法
- 3.CSS三种写法
-
- 行内样式
- 内部样式
- 外部引入
- 4.CSS选择器
-
- 选择器语法
- 通用选择器
- 标签选择器/元素选择器
- 类选择器
- ID选择器
-
1.CSS概述
1.CSS是(Cascading Style Sheets)层叠样式表
2.网页设计者使用CSS可以定义元素的样式，直白的讲就是让网页更好看
2.CSS语法
单个样式写法：
<标签名 style=“样式属性：样式属性值;”>内容
<div style="background-color:red">我是行标签div>
多个样式写法：
<标签名 style=“样式属性1：属性值; 样式属性2：属性值;”>源代码教育
<div style="background-color:red; font-size:25px; text-align:center">我是行标签div>
3.CSS三种写法
行内样式
当前标签有效，尽量不使用
<标签名 style="样式属性：样式属性值;" >内容标签名>
内部样式
即包含的四类选择器写法
<html>
<head>
<meta charset="UTF-8">
<title> titletitle>
<style type="text/css">
*{
background-color:red; font-size:25px; text-align:center
}
style>
head>
<body>
<div>我是行标签1div>
<div>我是行标签2div>
<span>我是行内标签1span>
<span>我是行内标签2span>
body>
html>
外部引入
在外部单独新建一个以.css为后缀的文件
@CHARSET "UTF-8";
.haha{
background-color:pink;
font-size: 25px;
text-align: center
}
然后使用<link>标签将这个CSS文件与需要样式的网页关联起来
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<link rel="stylesheet" href="./styles.css">
head>
<body>
<div class="haha">我是div1div>
<div >我是div2div>
<span>我是sapn1span>
<span >我是sapn2span>
body>
html>
4.CSS选择器
选择器语法
选择器名{
样式属性1：样式属性值;
样式属性2：样式属性值;
……
}
通用选择器
匹配所有 一般我们不用 全局字体可能会用
*{
样式
}
<html>
<head>
<meta charset="UTF-8">
<title> titletitle>
<style type="text/css">
*{
background-color:red; font-size:25px; text-align:center
}
style>
head>
<body>
<div>我是行标签1div>
<div>我是行标签2div>
<span>我是行内标签1span>
<span>我是行内标签2span>
body>
html>
标签选择器/元素选择器
页面内所有同类型标签均生效
标签名{
样式
}
<html>
<head>
<meta charset="UTF-8">
<title> titletitle>
<style type="text/css">
div{
background-color:red; font-size:25px; text-align:center
}
style>
head>
<body>
<div>我是行标签1div>
<div>我是行标签2div>
<span>我是行内标签1span>
<span>我是行内标签2span>
body>
html>
类选择器
极力推荐使用的 可控性好
.class属性值{
样式
}
<html>
<head>
<meta charset="UTF-8">
<title> titletitle>
<style type="text/css">
.aaa{
background-color:red; font-size:25px; text-align:center
}
style>
head>
<body>
<div class="aaa">我是行标签1div>
<div>我是行标签2div>
<span>我是行内标签1span>
<span>我是行内标签2span>
body>
html>
ID选择器
坚决不用，页面内id不能重复，id一般结合js用
#id值{
样式
}
<html>
<head>
<meta charset="UTF-8">
<title> titletitle>
<style type="text/css">
#a3{
background-color:yellow; font-size:25px; text-align:center
}
style>
head>
<body>
<div id="a3">我是行标签1div>
<div>我是行标签2div>
<span>我是行内标签1span>
<span>我是行内标签2span>
body>
html>