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

一般情况：行内元素>内部样式>外部样式

下面给出代码示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导入方法</title><!-- 注意：这里遵循就近原则，当前标签离哪个近就用哪个样式 --><!-- 内部样式：在HTML的Head部位书写 --><style>h1 {color: aliceblue;}</style><!-- 外部样式：在CSS中书写，然后通过Link导入 --><link rel="stylesheet" href="css.css"></head><body><!-- 行内样式：在body中书写标签时直接写入style --><h1 style="color:aqua;"></h1></body></html>
h1 {color: black;}

CSS的四种选择器

CSS的基本选择器分为四种：

  • 通配符选择器：

    • 针对所有标签进行选择

  • 标签选择器：

    • 针对所有对应的标签进行选择

  • 类选择器（class）：

    • 针对所有对应class名的所有类标签进行选择
    • 一个标签可以具有多个类，一个类可以作用于多个标签

  • id选择器（id）：

    • 针对对应id名的唯一标签进行选择
    • 一个标签只能有一个id，一个id只能作用于一个标签

三种选择器具有明确的优先级：id选择器>类选择器>标签选择器

下面给出示例代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三种选择器</title><!-- 这里选择器的样式遵循：id选择器>类选择器>标签选择器 --><style>/* 1.标签选择器：样式： 标签名{}自动选中所有标签的代码*/h1 {color: bisque;}p {color: blueviolet;font-size: 30px;}/* 2.类选择器：样式：.类名{}自动选中所有带类名的代码，可以跨标签，类名定义用class*/.myStyle {color: blue;font-size: 20px;}/* 3.id选择器：样式：#id名{}自动选择带有id名的代码，注意id具有全局唯一性*/#w123 {color: aquamarine;font-size: 40px;}#w333 {color: aquamarine;font-size: 40px;}/* 4.通配符选择器样式： * {}全部锁定，全部标签都带有以上特征*/</style></head><body><h1>标题1</h1><p>我是30px大小的</p><p class="myStyle"> 我是类选择器</p><p id="w123">我是id选择器</p><p class="myStyle" id="w333"> 我的最高权限是id选择器</p><p class="myStyle">我的最高权限是类选择器</p></body></html>

CSS层次选择器

层次选择器分为五种：

  • 并集选择器：

    • 选择器1，选择器2 {}
    • 同时选择多个选择器的标签

  • 后代选择器：

    • 父 子{}
    • 可以选择父类的所有子类标签以及子类标签后的所有标签

  • 子选择器：

    • 父>子{}
    • 只能选择父类的所有子类标签

  • 相邻选择器：

    • .class+兄弟标签类型{}
    • 只能选择.class的父类的下一个兄弟标签

  • 通用选择器：

    • .class~标签类型{}
    • 可以选择.class的父类的下一个之后包括下一个的所有兄弟标签

    下面给出代码示例：

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>层次选择器</title><!-- 层次选择器主要用于后代，下一代，兄弟等 --><style>/* 后代选择器： 格式：父类 父类的后代{}用于父类的后代所有标签内*/ul li{color: rgb(255, 0, 0);}/* 子选择器：格式：父类 子类{}仅用于父类的下一代*/body>p{color: aqua;}/* 相邻兄弟选择器：格式：.class名 + 同辈标签{}选定class的标签的相邻标签*/.active + p {color: black;}/* 通用兄弟选择器：格式：.class名 ~ 同辈标签{}选定class的标签的以下所有兄弟标签*/.allover ~ p {color: rgb(243, 255, 7);}</style></head><body><p><p>孙子1</p></p><p class="active">儿子2</p><p class="allover">儿子3</p><p>儿子4</p><p>儿子5</p><ul><li><p>我是孙子辈</p></li><li>我是儿子辈</li></ul></body></html>

    结构伪选择器

    结构伪选择器主要负责有条件性的标签选择

    下面直接给出代码示例：

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类选择器</title><!-- 结构伪类选择器在实际开发中并不常用，但我们仍需了解认识结构伪类选择器具有条件性，它有条件地选择部分内容进行CSS操作具体结构：父类：条件{} --><style>/* 例如我们希望在ul中的第一个和最后一个li中单独进行CSS操作 */ul li:first-child {color: brown;}ul li:last-child {color: red;}/* 这里我们以p的父元素为父类，来选择第2个孩子 *//* 我们可以通过nth-child（n）来选择第n个元素 */p:nth-child(2){color: aquamarine;}/* 这里我们以p的父元素为父类，来选择第2个p类型的孩子 *//* 我们可以通过nth-of-type（n）来选择第n个元素 */p:nth-of-type(2){color: antiquewhite;}/* 同时，“：”也具有其他性质；例如a的hover属性表示当鼠标放在a上时的CSS操作 */a:hover {background-color: black;}</style></head><body><a href="#">123</a><p>p1</p><p>p2</p><p>p3</p><ul><li>l1</li><li>l2</li><li>l3</li></ul></body></html>

    CSS属性选择器

    属性选择器是CSS3新加入的特性，极大程度方便了选择器的利用

    属性选择器的格式如下：

    • 标签[属性名]{}
    • 标签[属性名=属性]{}
    • 标签[属性名*=属性]{}
    • 标签[属性名^=属性]{}
    • 标签[属性名$=属性]{}

下面给出代码示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><!-- 属性选择器结构分有五种，分别有不同的作用：标签[属性名]{} 标签[属性名=属性]{}标签[属性名*=属性]{}标签[属性名^=属性]{}标签[属性名$=属性]{}  --><style>/* 首先我们把下方连接都变成框框，以便于效果明显（这里后面会涉及，目前不需要深究） */.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: #2700ff;text-align: center;color: gray;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 以下操作为防止冲突，均以注释格式出现，请测试时去除注释 *//* 标签[属性名]{} ：该标签内带有该属性的所有标签 .demo a[id]{background: red;} *//* 标签[属性名=属性]{} :该标签内带有该属性，且属性值对应的所有标签（注意：需要完全匹配）.demo a[id=w123]{background-color: aquamarine;}.demo a[class="class1 class2 class3"]{background-color: black;}*//* 标签[属性名*=属性]{}：该标签内带有该属性，且属性值对应的所有标签（注意：存在匹配即可） .demo a[class*="class1"]{background-color: aqua;}*//* 标签[属性名^=属性]{}:该标签内带有该属性，且以该属性开头 .demo a[href^="https"]{background-color: red;}*//* 标签[属性名$=属性]{}:该标签内带有该属性，且以该属性结尾 .demo a[href$="https"]{background-color: red;}*/</style></head><body><p class="demo"><a href="https://www.baidu.com" class="class1 class2 class3" id="w123">1</a><a href="https://www.taobao.com/" class="class1 class2 class3">2</a><a href="#" class="class1 class2 class3">3</a><a href="#" class="class1 class2 class3">4</a><a href="#" class="class1 class2" id="w321">5</a><a href="#" class="class1 class2">6</a><a href="#" class="class1 class2">7</a><a href="#" class="class1">8</a><a href="#" class="class1">9</a><a href="#" class="class1">10</a></p></body></html>

CSS字体样式

我们依次介绍字体样式 ：

  • font-family: 中文字体，英文字体；（这里设置文本字体，可以同时设置英文和中文字体，需要用逗号隔开，也可以只设置一种）
  • font-size: 20px;（这里设置文本大小）
  • font-weight: bold;（这里设置文本粗细，可以采用数字px，也可以采用bold等）
  • font-style:italic;(这里设置文字样式，例如italic斜体，normal正常)
  • color: brown;（这里设置字体颜色）
  • font: 粗细 大小 字体;(这里整合所有font设置，可以一次性设置完毕)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体样式</title><style>.divclass p{/* 我们常用的字体样式就以下四种 */font-family: 微软雅黑;font-size: 20px;font-weight: bold;color: brown;}</style></head><body><!-- 这里稍微介绍一下div和span，就是简单的盒子，属于行内元素，我们常常用来规范做某些事情 --><div class="divclass"><p>123</p><span>123</span></div></body></html>

CSS文本样式

文本样式主要是对文本进行操作，大致包括以下五种：

  • 颜色：color
  • 文本对齐：text-align
  • 首行缩进：text-indent
  • 行高：line-height
  • 装饰：text-decoration
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本样式</title><style>/* 颜色 color 有三种形式 1.直接写英文颜色 red 等2.以#开头，写000000~ffffff之间的颜色3.以RBG来写4.以RBGA来写（可写透明度）*/.class1 {/* 这里之间为大家举例（这样书写是不对的） */color: red;color: #121212;color: rgb(0, 255, 255);color:rgba(0, 255, 255, 0.1);}/* 文本对齐 text-align 有三种情况 center 居中对齐left 靠左对齐right 靠右对齐*/.class2 {text-align: center;}/* 首行缩进 text-indent通常采用em，em表示一个文字大小，常用2em*/.class3 {text-indent: 2em;}/*行高 text-height行高常用来使文字位于框架垂直中心当行高=框架高度，文字位于垂直中心*/.class4 {background-color: #121212;height: 300px;line-height: 300px;}/*修饰 text-decoration可以跟 none underline line-through overline因为超链接a自带下划线，我们常使用none去除下划线使其美观*/a {text-decoration: none;}</style></head><body><p class="class1">123</p><p class="class2">123</p><p class="class3">123</p><p class="class4">123</p><a href="#">我是链接</a></body></html>

CSS超链接伪类

在CSS的超链接中会出现动态情况，所以css给出相关伪类来改变超链接各种状态下的形态

下面给出代码示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接伪类和阴影</title><!-- 我们先解释一下超链接伪类 --><style>/* 正常情况下超链接伪类是很丑的且带下划线 *//* 首先我们对a进行修正 */a {/* 取消下划线，修改颜色 */text-decoration: none;color: black;}/* 我们来讲解一下a的一些伪类操作 *//* 这里表示当鼠标触及到超链接的状态 */a:hover{color: yellow;}/* 这里表示当鼠标点击超链接且未松开的状态 */a:active{color: green;}/* 这里表示当鼠标未点击超链接的状态（可能与a发生冲突，尽量不要使用） *//* a:link{color:blue;} *//* 这里表示鼠标已点击过的状态 （可能与a发生冲突，尽量不要使用）*//* a:visited{color:red;} */</style><!-- 我们稍微介绍一下阴影 --><style>/* text-shadow: 阴影颜色 阴影水平移动大小 阴影垂直移动大小 阴影光晕半径 （移动大小是可以写负数的） */#price{text-shadow: blue 10px 10px 2px;}</style></head><body><p><a href="#"> <img src="../../../../Resources/picture/1.jpeg" alt="纱雾老师"></a></p><p><a href="#">纱雾老师</a></p><p><a href="#" id="price">￥99</a></p></body></html>

CSS表单常用focus伪选择器

input:focus选择器专用于表单input中：用来表示当点击该表单时的标签状态

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单选择器</title><style>/* 用来表示选中该input标签时的状态 */input:focus{background-color: orange;}</style></head><body><input type="text"><input type= "button"></body></html>

CSS列表简单美化

在css基本课程中，我们给出列表的一些简单美化步骤

下面内容稍微阅读理解即可，后面我们会给出更加美观详细的步骤

下面给出代码示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单列表练习</title><!-- 与css链接 --><link rel="stylesheet" href="ccs.css"></head><body><!-- div是一个盒子，用来控制整体大小 --><div id="nav"><h2>淘宝销售</h2><ul><li><a href="#">女装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">童装</a>&nbsp;</li><li><a href="#">女鞋</a>&nbsp;&nbsp;<a href="#">男鞋</a>&nbsp;&nbsp;<a href="#">童鞋</a>&nbsp;</li><li><a href="#">手机</a>&nbsp;&nbsp;<a href="#">电脑</a>&nbsp;&nbsp;<a href="#">数码</a>&nbsp;</li></ul></div></body></html>
/* 首先设置最上方标题 */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背景主要分为两部分：

  • 背景颜色
  • 背景图片

我们的解释主要围绕这两部分展开：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景</title><!----><style>/* 背景颜色：background-color: transparent*//* 背景图片：background-image: none/url("图片地址") 背景图片可以选择其展示样式：background-repeat：选择是否平铺repeat平铺 no-repeat不平铺 repeat-x水平平铺 repeat-y垂直平铺背景图片可以选择位置：background-position：x y；选择x，y位置x：top/center/bottom y：left/center/right背景图片可以选择是否固定：background-attachment：选择背景图片是否固定scroll可滚动 fixed固定背景图片具有复合写法：background：颜色 地址 平铺 是否固定 位置背景图片可选择透明度：background：rgba（，，，a）a是透明度*/</style></head><body><div id="nav"></div></body></html>

结束语

关于CSS的基本知识点，我们就简单介绍到这里，后面我会逐渐更新CSS三大特性，盒子浮动等内容，请多多关注，谢谢