文章目录

CSS
- 引入css方式
- css代码风格
- css选择器
- - css基础选择器
  - - 标签选择器(元素选择器)
    - 类选择器(常用)
    - - 类选择器的多类名使用
    - id选择器(一般和js搭配)
    - 通配符选择器
  - css复合选择器(待补充。。)
  - - 派生选择器（子子孙孙都包含）
    - 子元素选择器
    - 属性选择器
    - 伪类选择器
    - 伪元素选择器
  - 权重
  - 设置颜色
  - 边框
  - css字体属性

CSS

css的主要使用场景就是美化网页，布局页面使用
css即层叠样式表（Cascading Style Sheets）的简称
css主要用于设置HTML页面中的文本内容（字体，大小，对齐方式），图片的外形（宽高，边框样式，边距等）以及版面的布局和外观显示样式。
css规则由两个主要部分构成：选择器以及一条或多条声明。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>01-css体验语法</title><style>/* 选择器 {样式} */p {color: red;font-size: 12px;}</style>
</head>
<body><p>生活很美好</p>
</body>
</html>

引入css方式

（1）行间样式：使用style属性
（2）页面级样式：使用style标签（放在head标签内）
（3）引入css文件：使用link标签在head内引入

<link rel="stylesheet" href="css/index.css">

css代码风格

1.样式格式书写

展开格式
```
 p {color: red;font-size: 12px;}
```

2.样式大小写风格

全部使用小写

3.样式空格风格

属性值前面，冒号后边，保留一个空格
选择器（标签）和大括号中间保留空格

css选择器

css基础选择器

标签选择器(元素选择器)

使用HTML标签名作为选择器
优点：能快速为页面中同类型的标签统一设置样式

缺点：不能设计差异化样式，只能选择全部的当前标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* 选择器 {样式} */p {color: green;}div {color: pink;}</style>
</head>
<body><p>生活很美好</p><div>life is shit</div>
</body>
</html>

类选择器(常用)

能差异化选择不同标签，单独选一个或某几个标签

注意

长名称或词组可以使用中横线来为选择器命名
不要使用纯数字，中文等命名，尽量使用英文字母来表示
命名要有意义，尽量使别人一眼就知道这个类名的目的（这里我的代码不符合规范）
命名规范：Web前端开发规范手册.doc

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>03-类选择器</title><style>/* 选择器 {样式} */.ii {color: green;}.dd {color: pink;}</style>
</head>
<body><ul><li class="ii">おはよう</li><li class="ii">こんにちは</li><li>こんにちは</li></ul><div class="dd">今まで</div>
</body>
</html>

练习1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>练习1</title><style>.pink {width: 100px;height: 100px;background-color: pink;}.yellow {width: 100px;height: 100px;background-color: yellow;}</style>
</head>
<body><div class="pink">いち</div><div class="yellow">に</div><div class="pink">さん</div>
</body>
</html>

类选择器的多类名使用

类名之间用空格分割
多类名开发中使用场景
- （1）可以把一些标签元素相同德阳市放到一个类里面
- （2）这些标签都可以调用这个公共的类，然后再调用自己独有的类
- （3）从而节省css代码，统一修改也方便

练习1 -> 代码修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>练习1</title><style>.box {width: 100px;height: 100px;}.pink {           background-color: pink;}.yellow {background-color: yellow;}</style>
</head>
<body><div class="box pink">いち</div><div class="box yellow">に</div><div class="box pink">さん</div>
</body>
</html>

id选择器(一般和js搭配)

为标有特定id的HTML元素指定特定的样式

id属性只能在每个HTML文档中出现一次

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>03-id选择器</title><style>#springgreen {color:springgreen;}</style>
</head>
<body><div id="springgreen">よん/し</div>
</body>
</html>

通配符选择器

表示选取页面中所有元素（标签）
特殊情况适用（清除标签内外边距）
```
* {margin: 0;padding: 0;
}
```

css复合选择器(待补充。。)

派生选择器（子子孙孙都包含）

.a p .span {}

子元素选择器

.a > span {}

属性选择器

[]

[class = a] {}
[class ^= a] {}    //a开头
[class $= a] {}    //a结尾

伪类选择器

伪元素选择器

权重

！important	行内	id	class/属性/伪元素	标签	通配
∞	1000	100	10	1	0

设置颜色

1.   color:red;
2.  color:#ff0000;          //rgb饱和度
3.  color:rgb(255,255,255）

边框

border： 1px solid #000;
==> border-width: 1px;border-style: solid;border-color: #000;

css字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

g谷歌默认字体-微软雅黑

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>03-id选择器</title><style>#first {font-family: '微软雅黑'}#second {font-family:'Courier New', Courier, monospace}#third {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif}</style>
</head>
<body><h3 id="first">微软雅黑</h3><h3 id="second">第二种</h3><h3 id="third">第三种</h3></body>
</html>

p72

CSS（持续更新。。）相关推荐

HTML+CSS(持续更新中)
跟着上章节的内容,本章节我们继续学习标签,我们要知道的是结构是非常重要的,样式其次文本格式化标签在网页中,有时需要为文字设置众多的样式,来显示其中独特的效果.这时我们就需要文本格式化标签了,使文字 ...
前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
快应用开发常见问题以及解决方案【持续更新】
接触快应用也有一段时间了,踩过了大大小小的坑,让我活到了今天.准备在此立贴持续更新,记录遇到的问题以及解决方案,造福大众. css 方面 1.文字竖排不支持目前官方还不支持writing-mode, ...
Java 最常见的 10000+ 面试题及答案整理：持续更新
Java面试题以及答案整理[最新版]Java高级面试题大全(2021版),发现网上很多Java面试题都没有答案,所以花了很长时间搜集,本套Java面试题大全,汇总了大量经典的Java程序员面试题以及答 ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
vue引入全局静态变量_vue-cli4 全面配置(持续更新)
https://github.com/staven630/vue-cli4-configgithub.com vue-cli4 全面配置(持续更新) 细致全面的 vue-cli4 配置信息.涵盖了使 ...
Android面试总结（持续更新修改）
###Android面试总结(持续更新修改) 1.Android 的四大组件是哪些,它们的作用? ①Activity是Android程序与用户交互的窗口,是Android构造块中最基本的一种,它需要为 ...
优秀开源项目（持续更新）
本文汇总了一些优秀的开源项目,java居多,包括 ,中间件,springmvc,springboot,springcloud,dubbo,redis分布式,学习资料,也包含了部分前端框架中间件 el ...
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码并基于前端进阶 ...
前端面试题精编2020（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码并基于前端进阶 ...

CSS（持续更新。。）