1、css三种应用方式：
- 1. 标签属性上编写
- 2. head标签中定义
- 3. 在css文件中定义
2、选择器
- 1.id选择器
- 2.class选择器
- 3.标签选择器
- 4.关联选择器（层级选择器）
- 5.组合选择器
- 6.属性选择器
3、 css常用属性
- 1. 边框
- 2. height & width
- 3. float 浮动
- 4. display样式
- 5. 內边距padding、外边距margin
- 6、font字体和颜色
- 7、文字对齐方式
- 8、background 背景
- 9、position 定位
- 10、opacity 透明度
- 11、overflow
- 12、hover

CSS（Cascading Style Sheets）称为层叠样式表，用于对页面进行美化。
CSS的注释：/* 注释内容 */

1、css三种应用方式：

1. 标签属性上编写

适用范围：指定一个标签。【不推荐，多标签无法复用样式】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="background-color:red; height:48px;">123</div><div style="background-color:#2908a1; height:48px;">456</div><div style="background-color:blue; height:48px;">789</div></body>
</html>

2. head标签中定义

适用范围：当前页面的所有标签。【推荐，多个标签可复用样式】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习</title><style>/*给所有的div设置样式*/div {color: green;}</style>
</head>
<body><div>seth</div><div>jack</div>
</body>
</html>

3. 在css文件中定义

适用范围：所有引入css文件的页面。【推荐，多页面、多个标签均可复用样式】

创建css文件，如：common.css

/*
author: mr.xue
2019.12.11
common.css
*/
.c1{                                /*c2优先级大于c1，如果c2放在c1上面，则反之*/background-color:blue;color: white;
}
.c2{color: red;font-size: 40px;
}

创建html文件，如：index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="common.css" /> /*引入css文件*/</head><body><div class="c1 c2" style="color: pick;">123</div> /*style优先级大于c1,c2*/</body>
</html>

优先级讲解

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.c1{                                /*c2优先级大于c1，如果c2放在c1上面，则反之*/background-color:blue;color: white;}.c2{color: red;font-size: 40px;}</style></head><body><div class="c1 c2" style="color: pick;">123</div> /*style优先级大于c1,c2*/</body>
</html>

2、选择器

学习选择器的目的就是选中html页面中指定标签，便于以后给他应用样式.

1.id选择器

在body中找一个id匹配的标签。（HTML中ID属性应唯一，相当于人的身份证号码）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#i1{                   /*id选择器,不可以重用*/background-color:red; height:48px;}#i2{background-color:#2908a1; height:48px;}#i3{background-color:blue; height:48px;}</style></head><body><div id="i1">123</div><div id="i2">456</div><div id="i3">789</div></body>
</html>

2.class选择器

在body中找到所有class属性值匹配的标签。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.c1{                       /*class选择器，可以重用，最最常用的就是这个*/background-color:blue; height:48px;}</style></head><body><div class="c1">123</div><div class="c1">456</div><div class="c1">789</div></body>
</html>

3.标签选择器

在body中找到所有指定标签

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{                           /*标签选择器，找到body中所有的div设置成这个样式*/background-black; color:white;}</style></head><body><div>123</div><div>456</div><div>789</div></body>
</html>

4.关联选择器（层级选择器）

在body标签中根据父子关系找到指定标签。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>span div{  /*也可以是.c1 div，中间用空格分隔*/                      background-black; color:white;}</style></head><body><div>123</div><span>wquwquhdhwh<div>456</div>sasa</span><div>789</div></body>
</html>

5.组合选择器

对选择器进行分组，无需重复编写。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#i1, #i2, #i3{                 /*中间用，分隔*/               background-black; color:white;}</style></head><body><div id="i1">123</div><span>wquwquhdhwh
<div id="i2">456</div>
sasa</span><div id="i3">789</div></body>
</html>

6.属性选择器

在body中找到所以class属性值匹配的标签。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>input[type='text']{height:100px;width:200px;}input[n='xue']{height:300;width:300px;} /*先筛选input,在筛选n='xue'*/.c1[n='xue']{height:300;width:300px;} /*先筛选class为c1,在筛选n='xue'*/</style></head><body><input type="text"><input type="text" n="xue"><input type="password"></body>
</html>

3、 css常用属性

1. 边框

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--边框宽度为1px 颜色是红色的--><div style="border: 1px solid red;">asdf</div><!--边框宽度为1px 边框为虚线 颜色是红色的--><div style="border: 1px dotted red;">asdf</div></body>
</html>

border-radius也可以设置圆角边框。

<div style="border: 2px solid #333333;border-radius: 10px;"></div><div style="border: 1px solid #333333;border-bottom-right-radius: 20px;"></div><div style="border: 1px solid #333333;border-bottom-right-radius: 20px;border-top-left-radius: 20px;"></div><div style="border: 1px solid #333333;width: 100px;height: 100px;border-radius: 30px;"></div><div style="border: 2px solid red;width: 80px;height: 80px;border-radius: 50%;"></div>

2. height & width

在html中如果想要给标签设置高度和宽度的话，需要使用height和width属性，并且在设置时有两种单位：

像素，根据像素设置。
百分比，根据百分比设置。
因网页高度无限制，所以默认高度无法设置百分比，如果非要设置，则需要父级标签设置固定高度，子标签便可使用百分比设置高度。

注意：行内标签无法设置高度和宽度，如果想要设置必须转换为块级标签才能应用。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="height: 48px; /*高度*/width: 80%; /*宽度,像素、百分比*/font-size: 23px; /*字体大小*/text-align:center; /*水平居中*/line-height:48px; /*垂直居中，数值与height一样*/font-weight: 300; /*字体加粗*/border: 1px dotted red;">asdf</div></body>
</html>

3. float 浮动

float浮动用于实现N个标签并排存放（主要针对块级标签，行内标签默认就可以并排存放）。

页面布局时，一般都会使用div标签及float属性来实现，float设置时一般有两个值：

float:left，标签并排向左浮动。
float:right，标签并排向右浮动。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="width:20%; background-color: red; float:left;">asdf</div><div style="width:80%; background-color: blue; float:left;">qwer</div><div style="width:20%; background-color: red; float:left;">asdf</div><div style="width:60%; background-color: blue; float:left;">qwer</div><div style="width:20%; background-color: red; float:left;">asdf</div><div style="width:60%; background-color: blue; float:right;">qwer</div><div style="width:20%; background-color: red; float:left;">asdf</div><div style="width:81%; background-color: blue; float:left;">qwer</div></body>
</html>

网页布局例子

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.pg-header{height: 38px;background-color: #dddddd;line-height: 38px;}</style></head><body style="margin: 0 auto;"><div class="pg-header"><div style="float: left;">本站收藏</div><div style="float: right;"><a href="">登录</a><a href="">注册</a></div><!-- 清除浮动，与使用了float属性的标签放在同一级 --><div style="clear:both;"></div></div><div style="width: 300px; border: 1px solid red;"><div style="width: 96px; height: 30px; border: 1px solid blue; float: left;"></div><div style="width: 96px; height: 30px; border: 1px solid green; float: left;"></div><div style="clear: both;"></div></div></body>
</html>

4. display样式

块级标签和内联标签之间进行转换
inline默认自己有多少占多少
block可以自己设置高度宽度、padding、margin
inline-block既有inline的属性又有block的属性
none让标签消失，可以设置功能消失显示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.pg-header{height: 38px;background-color: #dddddd;line-height: 38px;}</style></head><body><div style="background-color:red; display:inline;">123</div><span style="background-color:blue; display:block;">asdf</span><!-- inline-block 自己有多少就占多少空间，又可以设置高度宽度、padding、margin --><span style="background-color:blue; display:inline-block;">asdf</span></body>
</html>

*行内标签无法设置高度宽度、padding、margin
*块级标签是可以设置的

5. 內边距padding、外边距margin

padding内边距作用是为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向。

/* 单独设置上下左右内边距 */
padding-left:8px;
padding-right:2px;
padding-top:4px;
padding-bottom:18px;
/* padding:上 右 下 左; */
padding:10px 0 2px; 4px;
/* padding:上下  右左; */
padding:7px 5px;
/* padding:上下右左; */
padding:8px;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习</title>
</head>
<body>
<h1>无内边距</h1>
<div style="height: 200px;border: 1px solid #dddddd"><div style="background-color: darkseagreen;">听妈妈的话</div><div>小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。</div>
</div>
<h1>内边距示例1</h1>
<div style="height: 200px;border: 1px solid #dddddd"><div style="background-color: gold;padding: 10px;">听爸爸的话</div><div style="padding: 10px;">小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。</div>
</div>
<h1>内边距示例2</h1>
<div style="height: 200px;border: 1px solid #dddddd;padding: 10px;"><div style="background-color: gold;">听爸爸的话</div><div>小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。</div>
</div>
</body>
</html>

margin外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。

/* 单独设置上下左右内边距 */
margin-left:8px;
margin-right:2px;
margin-top:4px;
margin-bottom:18px;
/* margin:上 右 下 左; */
margin:10px 0 2px; 4px;
/* margin:上下  右左; */
margin:7px 5px;
/* margin:上下右左; */
margin:8px;margin: 0 auto;
0:上下间距为0 auto:左右各一半

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习</title>
</head>
<body><div style="height: 200px;background-color: gold;"></div><div style="height: 200px;background-color: pink;margin-top: 20px;"></div>
</body>
</html>

外边距补充：body标签默认有一个 8px的外边距，所以你会发现默认的页面都有一个“白边”。

6、font字体和颜色

<h1>字体格式</h1>
<div style="font-family: "Times New Roman",Georgia,Serif;">一白日依山尽，黄河入海流。</div>
<div style="font-family: Arial,Verdana,Sans-serif;">欲穷千里目，更上一层楼。</div><h1>字体大小</h1>
<div style="font-size: 13px;">smallsmallsmall</div>
<div style="font-size: 16px;">middlemiddlemiddle</div>
<div style="font-size: 18px;">bigbigbigbig</div><h1>字体加粗</h1>
<div style="font-weight: 100;">想想想想想想想想想想想想想想想</div>
<div style="font-weight: 300">重中之重重中之重重中之重重中之重</div>
<div style="font-weight: 400">哒哒哒哒哒哒哒哒</div><h1>字体颜色</h1>
<div style="color: red;">colorcolorcolor</div>
<div style="color:#f0ad4e">风格哈各方经过发酵</div>

7、文字对齐方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><style>.c1{width: 400px;}.c2{width: 400px;height: 100px;}</style>
</head>
<body><h1>水平方向</h1><div class="c1" style="background-color: pink;text-align: left;">fsggsd</div><div class="c1" style="background-color: darkseagreen;text-align: center;">sggsgs</div><div class="c1" style="background-color: goldenrod; text-align: right;">gsgsgs</div><h1>垂直方向</h1><div class="c2" style="background-color: pink;">gsfghuhgsu</div><div class="c2" style="background-color: darkseagreen;line-height: 100px;">gsgsugusi</div><div class="c2" style="background-color: goldenrod;position: relative; "><span style="position: absolute;bottom: 0;">sgfhugshughfui  </span></div>
</body>
</html>

8、background 背景

background-color:red;
background-image:url(‘image.gif’); # 默认，div大，图片重复放
background-repeat:no-repeat/repeat-x/repeat-y # 图片不重复放/x方向上重复放/y方向上重复放
background-position: 10px 10px; # 移动背景图片，抠取自己需要的图片部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="height:100px;"></div><div style="height: 50px; width:50px;border: 1px solid red;background-image:url('1.png');background-repeat:no-repeat;background-position:-50px -50px"></div></body>
</html>

9、position 定位

position用于对屏幕上的标签进行定位，可以分为两种：

1、position:fix，生成绝对定位的元素，相对于浏览器窗口进行定位。例如最常见的广告位和返回顶部，都是基于它来实现。固定在页面某个位置，使得div标签脱离重叠的状态，有了position之后，就会有top、left、right、bottom四个属性，离顶部、左边、右边、底部多少像素

应用场景1: 返回顶部的按钮一直在右下角

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div onclick="GoTop()"; style="background-color:black; color: white; height: 50px; width: 50px;position: fixed; <!--固定在页面某个位置-->bottom: 20px;right: 20px;">返回顶部</div><div style="height: 1500px; background-color: red;"></div><script>function GoTop(){document.body.scrollTop = 0;}</script></body>
</html>

应用场景2: 网页下滑，头部一直顶部显示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.pg-header{height: 48px;background-color: black;color: red;position: fixed;top: 0;left: 1px;right: 1px;}.pg-body{height: 1000px;background-color: #dddddd;margin-top: 50px;}</style></head><body><div class="pg-header">头部</div><div class="pg-body">内容</div></body>
</html>

2、position:absolute ，生成绝对定位的元素，相对于特定第一个父元素进行定位，常与position:relative结课使用。例如：想要让某标签相对某指定标签位置显示。

应用场景：点赞

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="position: relative; height:200px; width:500px; border: 1px solid red; margin: 0 auto"><div style="position: absolute; left: 0; bottom: 0; height: 50px; width: 50px; background-color: black;"></div></div><div style="position: relative; height:200px; width:500px; border: 1px solid red; margin: 0 auto"><div style="position: absolute; right: 0; bottom: 0; height: 50px; width: 50px; background-color: black;"></div></div><div style="position: relative; height:200px; width:500px; border: 1px solid red; margin: 0 auto"><div style="position: absolute; left: 0; top: 0; height: 50px; width: 50px; background-color: black;"></div></div></body>
</html>

10、opacity 透明度

给标签设置透明度，例如：常见的加载、登录框等显示都是基于它实现。

应用场景：弹框
opacity: 透明度、z-index: 层级顺序，大的在上面
要想弹框出现或消失，只需对display属性进行操作

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="z-index: 10; position: fixed; top: 50%; left: 50%; margin-left: -250px; margin-top: -50px;height: 100px;width: 500px; background-color: white;"></div><div style="z-index: 9; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.5;background-color: black;"></div><div style="height: 1500px; background-color: red;"></div></body>
</html>

11、overflow

hidden: 超过div定义的长度就隐藏剩余的内容
auto: 大小就这么大，别的做成滚动条

<div style="height: 200px; width: 300px; overflow: hidden;"><img src="1.jpg" /></div><div style="height: 200px; width: 300px; overflow: auto;"><img src="1.jpg" /></div>

12、hover

当鼠标移动到标签上时，加了hover的样式才生效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.pg-header{position:fixed;top: 0;left: 0;right: 0;height: 48px;line-height: 48px;background-color: #dddddd;}.pg-body{margin: 50px;}.w{width: 980px;margin: 0 auto;}.pg-header .w .logo{display: inline-block;padding: 0 10px 0 10px;color: white;}.pg-header .w .logo:hover{background-color: red;}</style>
</head>
<body>
<div class="pg-header"><div class="w"><a class="logo">hello</a><a class="logo">world</a><a class="logo">good</a><a class="logo">evening</a><a class="logo">right</a></div>
</div>
<div class="pg-body">dsdsds
</div>
</body>
</html>

CSS-应用方式、选择器、常用属性相关推荐

css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
CSS引入方式与文本属性
CSS引入方式与文本属性引入方式内部样式表行内样式表外部样式表文本属性文本对齐文本缩进文本颜色行间距装饰文本引入方式内部样式表 <!DOCTYPE html> &l ...
css2.0圆角,CSS圆角效果-CSS3常用属性集合
CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此: {-moz-border-radius: 4px; -we ...
[css] css中的选择器、属性、属性值区分大小写吗？
[css] css中的选择器.属性.属性值区分大小写吗? 选择器和属性区分大小写,属性值如果是颜色可以不区分大小写吧个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢 ...
CSS 导入方式选择器
一:基本了解 1.CSS,Cascading Style Sheet 层叠级联样式表 2.优势: 使得网页内容和表现样式分离使得网页结构表现形式统一,可以实现复用二:HTML中四种CSS导入方式 ...
网页前端培训3CSS基本使用/选择器/常用属性
CSS 概述层叠样式表,做到网页表现与内容分离的一种样式的设计语言,能对网页中的对象位置进行像素级的精确控制. 基本语法选择器{ 属性:属性值: 属性:属性值: ...... } 注意:声明需要 ...
Series(一)：Series的创建方式和常用属性说明
1.list.ndarray.Series的简单比较 list列表,列表中的元素可以是不同的数据类型,使用从0开始的整数值作为默认索引: ndarray数组,数组中的元素必须是同种数据类型,也是使用从 ...
CSS之关系选择器、属性选择器、伪类选择器
一.关系选择器后代选择器:只要是这个元素的后代,样式都会发生变化,div下面的所有h1标签样式都会改变关系选择器:子代选择器,只改变子标签的样式 <!DOCTYPE html> < ...
css：input button常用属性以及将button嵌入到input中
1.鼠标经过button变成小手 //css属性 cursor:pointer; 2.清除button默认边框 border: none; 3.清除input默认边框 outline: 0; 4.设置 ...
Css 特殊或不常用属性
1. -webkit-font-smoothing: antialiased; CSS3中用于webkit引擎(如chrome)中设置字体的抗锯齿或者说光滑度的属性.有3个属性:none用于小像素的文 ...

CSS-应用方式、选择器、常用属性

目录