CSS2基础（part-1）
CSS2基础
基础
简介
【全称】Cascading Style Sheets，又名层叠样式表
- 层叠：一层一层涂上去
- 表：列表
- 样式：如文字大小，颜色，元素宽高等。
CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
语言类型
标记语言，为HTML结构美化样式，实现语义与效果的分离，更好地美化网页，优化网页结构
作用于HTML的方式
行内样式（不推荐）
语法：
<!--写在标签中的style中-->
<body>
<h1 style="color:skyblue;">title</h1>
</body>
缺点：
- 工作量大，效率低下
- html和css耦合性太高，css使html结构与样式分离的作用微乎其微
内部样式
语法：
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
h1{
color: skyblue;
}
h2{
color: greenyellow;
}
</style>
</head>
<body>
优点：
- 结构和样式已经初步分开，代码可以进行服用
缺点：
- 需要复制到另一个html文件才可以实现样式复用，耗费时间
[!NOTE]
一开始写CSS样式的时候，可以使用内部样式，不用再开一个.css文件来赋予结构样式，
到后来熟练了可以使用外部样式，写在.css文件中
外部样式
语法：
<!--HTML文件-->
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<link rel="stylesheet" href="../CSS/03.css">
<!--head中写link来连接外部样式表-->
<!--rel:关系 href:来源-->
</head>
/*CSS文件*/
h1{
color: skyblue;
}
h2{
color: gray;
}
最常使用的方式，实际开发几乎都使用外部样式表
优点：
- 当第一次通过浏览器渲染后，CSS样式就会因为与.html文件的分离而进行缓存，下次渲染则可以提高访问速度
样式的优先级
顺序：
行内样式 > 内部样式 = 外部样式
attention
- 遵循“后来者居上”的原则
- 相当于涂鸦，涂了第二层，第一层就会看不见了
语法规范
结构：
| 选择器 | 找到想要更改样式的元素 |
|---|---|
| 声明块 | 一个或多个声明（声明：[属性名： 属性值；]） |
h2{
color: gray;
}
代码风格
| 风格 | 作用 |
|---|---|
| 展开风格 | 开发时推荐，便于维护和调试 |
| 紧凑风格 | 项目上线时推荐，可以减小文件体积，以节约网络流量，同时使打开网页的速度更快 |
CSS选择器
基本选择器
通配选择器
作用：
选中所有的HTML元素（清除样式的时候有用）
* {
color: red;
}
元素选择器
作用：
为某种元素统一设置，无法实现同类型的差异化
标签名 {
属性名: 属性值;
}
类选择器
作用：
通过元素中的class的属性值来进行可以自己分类的样式分配
元素中的class属性的属性值可以有多个，用空格隔开
class属性的属性值尽量为字母+数字，用-连接，避免纯数字的出现
/*假设有一个元素h1，它的class属性的属性值为skyblue*/
.skyblue {
color: skyblue;
}
ID选择器
作用：
选中唯一的元素通过id属性的属性值（其中的原理是不同的元素，id属性的属性值必须不同）
/*假设有一个元素h1，它的id属性的属性值为special*/
#special {
color: skyblue;
}
复合选择器
交集选择器
作用：
选中同时符合多个条件的元素
选择器1选2选3 {
color: skyblue;
}
/*比如p.blue 就是说class属性的属性值为blue的p标签（双重筛选）*/
[!NOTE]
- 有标签名必须写在前面
- 不可能同时出现两个元素选择器
并集选择器
作用：
选中多个选择器对应的元素
h2,
h3,
p {
font-size: large;
}
/*
选择器1，
选择器2，
选择器3 {
属性名： 属性值；
}
*/
- 一般竖着写
- 集体声明，可以缩小样式表的体积
HTML元素之间的关系
- 父元素
- 子元素
- 祖先元素（爸爸也算是祖先）
- 后代元素（儿子也算是后代）
- 兄弟元素
为后面的后代选择器等选择器做知识储备
后代选择器（id，类也可）
作用：
选中指定元素中，符合要求的后代元素
<style>
ul li {
color: skyblue;
font-size: large;
}
</style>
<ul>
<li>l</li>
<li>o</li>
<li>v</li>
<li>e</li>
<li>
<a href="#">love</a>
</li>
<li>
<ul>
<li>1</li> <!--这个也可以被选中-->
</ul>
</li>
</ul>
[!TIP]
- 最后选中的是后代，不包括祖先
- 须符合html的嵌套要求 （可以跨代寻找）
- 子代和孙子辈以及等等可以同时兼顾
子代选择器
作用：
选中指定元素中符合要求的子代元素
选1>选2>选3 {
color： skyblue；
}
/*
选择器可以不从最外面开始找寻元素
*/
兄弟选择器
作用：
选中指定元素后，符合条件的相邻兄弟元素
分类：
| 分类 | 语法 | 作用 |
|---|---|---|
| 相邻 | 选1+选2 | 向下找同代，第一个如果是选2，则赋予样式 |
| 通用 | 选1~选2 | 向下找通带，如果是选2，则赋予样式，可以不止一个 |
<style>
ul+ol {
color: skyblue;
}
p+h2 {
color: yellow;
}
h2~h3 {
color: aquamarine;
font-size: large;
}
</style>
<body>
<div>
<ul>
<li>love</li>
<li>like</li>
</ul>
<ol>
<li>long</li>
<li>lonely</li>
</ol>
<p>paragrah</p>
<h3>title333</h3>
<h2>title2</h2>
<h3>title3</h3>
<h3>title33</h3>
</body>
属性选择器
作用：
选中属性值符合一定要求的元素
/* 第一种写法，选中具有相同属性的元素 */
[title] {
color: skyblue;
}
/* 第二种写法，选中属性以及属性值都相同的元素 */
[title = "1"] {
color: aquamarine;
}
/* 第三种写法，选中属性相同，且属性值开头相同的元素 */
[title^="a"] {
color: yellow;
}
/* 第四种写法，选中属性相同，且属性值结尾相同的元素 */
[title$="e"] {
font-size: larger;
}
/* 第五种写法，选中属性相同，且属性值中包含部分值的元素 */
[title*="1"] {
color: brown;
}
伪类选择器
概念解析：
不是真的类class，而是元素的一种状态
分类：
| 动态伪类 | 意思 | 结构伪类 | 意思 |
|---|---|---|---|
| link（超链接独有） | 尚未连接 | first-child | 第一个孩子 |
| visted（超链接独有） | 连接过 | last-child | 最后一个孩子 |
| hover | 鼠标悬停 | nth-child（n） | 第n个孩子 |
| active | 元素激活（按下鼠标不松开） | first-of-type | 第一个同类型孩子 |
| focus | 获取焦点（表单元素） | last-of-type | 最后一个同类型孩子 |
| nth-of-type（n） | 第n个同类型孩子 | ||
结构伪类补充
1.关于括号中的n
- 0或不写：什么都不选
- n：选中所有（几乎不用）
- 1~正无穷：选中对应序号
- 2n或even：选中序号为偶数
- 2n+1或odd：选中序号为奇数
- -n+3：选中前三个
原理：an + b
2.细节：
类似于立嫡立长，即取第一个儿子，孙子...(同时)
例子：
div p:first-child
意思是找div中的第一个儿子，孙子...是不是p，是就赋予样式
p:first-child
意思是找body中的第一个儿子，孙子...是不是p，是就赋予样式
否定伪类
作用：
排除满足括号中条件的元素
语法：
:not(选择器)
p:not(:first-child) {
color: skyblue;
}
UI伪类
分类：
| what | 意思 |
|---|---|
| checked | 被选中的复选框或单选框 |
| enable | 可用的表单元素 |
| disabled | 不可用的表单元素 |
/* 选中的是被选中的复选框和单选框 */
input:checked {
width: 100px;
height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled {
background-color: gray;
}
/* 选中的是可用的input元素 */
input:enabled {
background-color: skyblue;
}
目标伪类（了解）
作用：
选中指定的锚点元素
/* 选中锚点指向的元素 */
div:target{
background-color: gray;
}
语言伪类（了解）
作用：
根据指定的语言选择元素
div:lang(en) {
color: skyblue;
}
伪元素选择器
作用：
选中元素中的一些特殊位置（在元素里）
分类：
| what | 意思 |
|---|---|
| first-letter | 第一个文字 |
| first-line | 第一行文字 |
| selection | 被鼠标选中 |
| placeholder | 提示文字（输入框中） |
| before | 最开始的位置创建子元素 |
| after | 最后的位置创建子元素 |
/* 选中元素中的第一个文字 */
div::first-letter {
color:skyblue;
}
/* 选中元素中的第一行文字 */
div::first-line {
color: gray;
}
/* 选中的是鼠标选中的文字 */
div::selection {
color: red;
background-color: gainsboro;
}
/* 选中的是input元素中的提示文字 */
input::placeholder {
color:skyblue;
}
/* 在p元素一开始的位置，创建一个子元素 */
p::before {
content: "￥";
}
/* 在p元素最后的位置，创建一个子元素 */
p::after {
content: "millions";
}
[!WARNING]
first-letter 和first-line内容若出现使用重叠，first-letter所使用的样式会覆盖first-line的样式
选择器优先级
原则：
- 通过权重来区分到底哪个样式最优先
- 行内样式和!important出现就不计较权重谁大谁小
细节呈现：
权重语法：（a，b，c）{a,b,c为个数}
| a | ID |
|---|---|
| b | 类，伪类，属性 |
| c | 元素，为元素 |
权重比较方式
一个一个进行比较，当a比出结果，权重就出结果，若没有，就接着往下让b进行比较，以此类推
[!IMPORTANT]
!important > 行内样式 > 一切权重
!important不到情急不可进行使用，因为这种做法会使工作的交接细节出现问题，
即使使用了，过后也需要删除，找到无法用权重方式使样式变更的原因，并解决
快捷方式：
只要将鼠标放在选择器上，则可以出现权重，无需计算
之前的讲解是为了了解其中的权重计算原理，而非只是表面的计算
CSS2基础（part-1）的更多相关文章
- css2基础知识梳理
基础的css知识,只放XMind的截图. css01 css02 css03 css04 css05 css+div布局是前端的基本功,要多多练习.运用标准流.浮动.定位.层级等,做简单的静态页面.一 ...
- CSS3总结 （帅哥）
第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷 ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- web(五)CSS引入方式，编写规范及调试
CSS (Cascading Style Sheets)层叠样式表 ,是由万维网联盟(W3C)制定的标准 CSS的主要作用: 美化html元素的外观,例如设定背景颜色.字体等. 对网页元素进行布局.以 ...
- 前端CSS3笔记
第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1 CS ...
- css页面网址
前端必看的文章 1.CSS设置居中的方案总结 https://juejin.im/post/5a7a9a545188257a892998ef 2.阮一峰老师的网站 http://www.ruanyi ...
- 01 . 前端之HTML
初识前端 HTML简介历史 HTML(Hyper Text Markup Language)超文本标记语言,它不同于编程语言 超文本就是超过纯文本的范畴,例如描述文本的颜色.大小.字体等信息,或使用图 ...
- css 10-CSS3选择器详解
10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. #CSS3的现状 浏览器支持程度不够好,有 ...
- HTML5零基础学习Web前端需要知道哪些？
HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...
- 零基础学WEB前端-CSS
CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...
随机推荐
- NB-IoT，LoRA，WIFI，蓝牙，Zigbee，MQTT，CoAP之间的关系
--- title: file_name date: 2020-06-22 07:26:20 categories: tags: - iot - wifi - Bluetooth - MQTT - c ...
- 全志A40i＋Logos FPGA开发板（4核ARM Cortex-A7）硬件说明书（上）
前 言 本文档主要介绍TLA40iF-EVM工业评估板硬件接口资源以及设计注意事项等内容. 核心板的ARM端和FPGA端的IO电平标准一般为3.3V,上拉电源一般不超过3.3V,当外接信号电平与IO电 ...
- SqlServer 使用 case when 实现行转列，并创建视图表查询
其实是个很简单的操作了,但长时间不用有点忘记了,正好项目上遇到这样的需求便把过程记录了下来. 一 需求描述 将河道水情表 结构如下,现在需要将水位Z字段由行展示转换为列展示.查询结果为展示时间和每个测 ...
- 【VMware vSAN】vSAN Data Protection Part 2：配置管理。
上篇文章"vSAN Data Protection Part 1:安装部署."介绍了如何安装及部署 VMware Snapshot Service Appliance 设备,并在 ...
- MFC基于对话框工程笔记->新建MFC对话框
一.前言 最近用MFC做了一个对话框小工具,学到了很多知识,现在做一下总结,以作备忘.(如有不足,后期添加修改) 二.MFC使用->新建MFC对话框 操作环境:VS2010 主要使用语言:C.C ...
- Mybatis XXXMapper.xml映射文件配置
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...
- Mac 每次都要执行source ~/.bash_profile 配置的环境变量才生效
自己在 ~/.bash_profile 中配置环境变量, 可是每次重启终端后配置的不生效.需要重新执行 : $source ~/.bash_profile 发现zsh加载的是 ~/.zshrc文件,而 ...
- JVM学习笔记-如何在IDEA打印JVM的GC日志信息
若要在Idea上打印JVM相应GC日志,其实只需在Run/Debug Configurations上进行设置即可. 拿<深入Java虚拟机>书中的3-7代码例子来演示,如 1 public ...
- 使用ES6中Class实现手写PromiseA+,完美通过官方872条用例
目录 Promise出现的原因 myPromise的实现要点 myPromise的实现 myPromise - 实现简单的同步 myPromise - 增加异步功能 myPromise - 链式调用( ...
- [oeasy]python0045_四种进制_binary_octal_decimal_hexadecimal
四种进制 回忆上次内容 上次研究了 通过 八进制数值 转义 \ooo 把(ooo)8进制对应的ascii字符输出 转义序列 \n.\t 是 转义序列 \xhh 也是 转义序列 \ooo 还是 转义序列 ...