CSS基本知识点——带你走进CSS的新世界
CSS基本知识点
我们在学习HTML之后，前端三件套第二件便是CSS，但CSS内容较多，我们分几部分讲解：
（如果没有学习HTML，请参考之前文章：HTML知识点概括——一篇文章带你完全掌握HTML>）
CSS作用
如果说HTML为网页提供内容，那么CSS就是为内容进行装饰，为网页进行布局
CSS可以控制整体框架，控制文本字体，大小等诸多事宜
CSS语法
CSS基本语法只有一条：
选择器 {
声明1；
声明2；
}
元素显示模式
首先我稍微解释一下元素显示模式：
- 元素以什么方式进行显示
HTML的元素类型模式：
- 块元素
- 行内元素
我们先讲解一下块元素：
- 块元素包括：h标题系列，p，div，ul，ol，li
- 块元素特点包括：
- 自己独占一行
- 高宽，外距，背景色都可以设置
- 宽度默认为父类
- 是一个容器，可以放置行内或行内块元素
我们再来讲解一下行内元素：
- 行内元素包括：a，strong，b，em，span
- 行内元素特点包括：
- 相近元素在一行
- 无法设置长宽
- 默认宽度为字宽度
- 行内元素只能容纳文本和其他行内元素
最后我们介绍一下行内块元素：
- 行内块元素包括：img，input，td
- 行内块元素特点：
- 一行可有多个行内块元素
- 正常情况宽度为内容宽度
- 可以设置宽度
这些属性并非都是绑定的，我们可以通过方法进行转换：
display：inline/block/inline-block 分别对应行内元素，块元素，行内块元素
CSS写入的三种方式
CSS作用HTML中一共有三种方法，我们一一介绍：
- 第一种：行内样式
- 直接在单个标签中写入style并进行书写
- 第二种：内部样式
- 在html文件的head区域写入style进行书写
- 第三种：外部样式
- 在css文件中书写，在html文件中的head区域采用link方法导入
- link语法：
上面三种语法讲究就近原则，当前标签距离谁较近，就是用哪种css
一般情况：行内元素>内部样式>外部样式
下面给出代码示例：
导入方法
h1 {
color: black;
}
CSS的四种选择器
CSS的基本选择器分为四种：
-
通配符选择器：
- 针对所有标签进行选择
-
标签选择器：
- 针对所有对应的标签进行选择
-
类选择器（class）：
- 针对所有对应class名的所有类标签进行选择
- 一个标签可以具有多个类，一个类可以作用于多个标签
-
id选择器（id）：
- 针对对应id名的唯一标签进行选择
- 一个标签只能有一个id，一个id只能作用于一个标签
三种选择器具有明确的优先级：id选择器>类选择器>标签选择器
下面给出示例代码：
三种选择器
标题1
我是30px大小的
我是类选择器
我是id选择器
我的最高权限是id选择器
我的最高权限是类选择器
CSS层次选择器
层次选择器分为五种：
-
并集选择器：
- 选择器1，选择器2 {}
- 同时选择多个选择器的标签
-
后代选择器：
- 父 子{}
- 可以选择父类的所有子类标签以及子类标签后的所有标签
-
子选择器：
- 父>子{}
- 只能选择父类的所有子类标签
-
相邻选择器：
- .class+兄弟标签类型{}
- 只能选择.class的父类的下一个兄弟标签
-
通用选择器：
- .class~标签类型{}
- 可以选择.class的父类的下一个之后包括下一个的所有兄弟标签
下面给出代码示例：
层次选择器 孙子1
儿子2
儿子3
儿子4
儿子5
-
我是孙子辈
- 我是儿子辈
结构伪选择器
结构伪选择器主要负责有条件性的标签选择
下面直接给出代码示例：
结构伪类选择器 123p1
p2
p3
- l1
- l2
- l3
CSS属性选择器
属性选择器是CSS3新加入的特性，极大程度方便了选择器的利用
属性选择器的格式如下：
- 标签[属性名]{}
- 标签[属性名=属性]{}
- 标签[属性名*=属性]{}
- 标签[属性名^=属性]{}
- 标签[属性名$=属性]{}
下面给出代码示例：
属性选择器
CSS字体样式
我们依次介绍字体样式 ：
- font-family: 中文字体，英文字体；（这里设置文本字体，可以同时设置英文和中文字体，需要用逗号隔开，也可以只设置一种）
- font-size: 20px;（这里设置文本大小）
- font-weight: bold;（这里设置文本粗细，可以采用数字px，也可以采用bold等）
- font-style:italic;(这里设置文字样式，例如italic斜体，normal正常)
- color: brown;（这里设置字体颜色）
- font: 粗细 大小 字体;(这里整合所有font设置，可以一次性设置完毕)
字体样式
123
123
CSS文本样式
文本样式主要是对文本进行操作，大致包括以下五种：
- 颜色：color
- 文本对齐：text-align
- 首行缩进：text-indent
- 行高：line-height
- 装饰：text-decoration
文本样式
123
123
123
123
我是链接
CSS超链接伪类
在CSS的超链接中会出现动态情况，所以css给出相关伪类来改变超链接各种状态下的形态
下面给出代码示例：
超链接伪类和阴影
CSS表单常用focus伪选择器
input:focus选择器专用于表单input中：用来表示当点击该表单时的标签状态
表单选择器
CSS列表简单美化
在css基本课程中，我们给出列表的一些简单美化步骤
下面内容稍微阅读理解即可，后面我们会给出更加美观详细的步骤
下面给出代码示例：
简单列表练习
/* 首先设置最上方标题 */
h2{
background-color: blanchedalmond;
font-size: 20px;
font-weight: bold;
text-indent: 2em;
line-height: 35px;
}
/* 然后我们设置盒子大小 */
#nav {
width: 300px;
background-color: gray;
}
/* 然后我们对li做出调整 */
ul li{
/*
首先我们去掉前方的索引号
list-style:
none 无
circle 空心圆
decimal 数字
square 方形
*/
list-style: none;
height: 30px;
text-indent: 1em;
}
/* 最后我们设置a和a：hover */
a {
text-decoration: none;
color:black;
font-size: 14px;
}
a:hover{
color: orange;
}
CSS背景
CSS背景主要分为两部分：
- 背景颜色
- 背景图片
我们的解释主要围绕这两部分展开：
背景
结束语
关于CSS的基本知识点，我们就简单介绍到这里，后面我会逐渐更新CSS三大特性，盒子浮动等内容，请多多关注，谢谢