文章目录 显示

? 优质资源分享 ?

学习路线指引（点击解锁）	知识定位	人群定位
? Python实战微信订餐小程序 ?	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
?Python量化交易实战?	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

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

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

下面给出代码示例：

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>
 h1 {
 color: aliceblue;
 }
 style>

    <link rel="stylesheet" href="css.css">
head>
<body>

    <h1 style="color:aqua;">h1>
body>
html>

h1 {
    color: black;
}

CSS的四种选择器

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

通配符选择器：
- 针对所有标签进行选择
标签选择器：
- 针对所有对应的标签进行选择
类选择器（class）：
- 针对所有对应class名的所有类标签进行选择
- 一个标签可以具有多个类，一个类可以作用于多个标签
id选择器（id）：
- 针对对应id名的唯一标签进行选择
- 一个标签只能有一个id，一个id只能作用于一个标签

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

下面给出示例代码：

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>
 /* 
 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>标题1h1>
    <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的父类的下一个之后包括下一个的所有兄弟标签下面给出代码示例：

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>孙子1p>
    p>
    <p class="active">儿子2p>
    <p class="allover">儿子3p>
    <p>儿子4p>
    <p>儿子5p>
    <ul>
        <li>
            <p>我是孙子辈p>
        li>
        <li>我是儿子辈li>
    ul>
body>
html>
折叠

结构伪选择器

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

下面直接给出代码示例：

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中单独进行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="#">123a>
    <p>p1p>
    <p>p2p>
    <p>p3p>
    <ul>
        <li>l1li>
        <li>l2li>
        <li>l3li>
    ul>
body>
html>

CSS属性选择器

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

属性选择器的格式如下：

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

下面给出代码示例：

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">1a>
        <a href="https://www.taobao.com/" class="class1 class2 class3">2a>
        <a href="#" class="class1 class2 class3">3a>
        <a href="#" class="class1 class2 class3">4a>
        <a href="#" class="class1 class2" id="w321">5a>
        <a href="#" class="class1 class2">6a>
        <a href="#" class="class1 class2">7a>
        <a href="#" class="class1">8a>
        <a href="#" class="class1">9a>
        <a href="#" class="class1">10a>
    p>
body>
html>
折叠

CSS字体样式

我们依次介绍字体样式：

font-family: 中文字体，英文字体；（这里设置文本字体，可以同时设置英文和中文字体，需要用逗号隔开，也可以只设置一种）
font-size: 20px;（这里设置文本大小）
font-weight: bold;（这里设置文本粗细，可以采用数字px，也可以采用bold等）
font-style:italic;(这里设置文字样式，例如italic斜体，normal正常)
color: brown;（这里设置字体颜色）
font: 粗细大小字体;(这里整合所有font设置，可以一次性设置完毕)

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 class="divclass">
        <p>123p>
        <span>123span>
    div>
body>
html>

CSS文本样式

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

颜色：color
文本对齐：text-align
首行缩进：text-indent
行高：line-height
装饰：text-decoration

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">123p>
    <p class="class2">123p>
    <p class="class3">123p>
    <p class="class4">123p>
    <a href="#">我是链接a>
body>
html>
折叠

CSS超链接伪类

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

下面给出代码示例：

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">￥99a>
    p>
body>
html>
折叠

CSS表单常用focus伪选择器

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

html>
<html lang="en">

 8">
 content="IE=edge">
 content="width=device-width, initial-scale=1.0">
 表单选择器

 <span class="hljs-comment">/* 用来表示选中该input标签时的状态 */</span>
 <span class="hljs-selector-tag">input</span><span class="hljs-selector-pseudo">:focus</span>{
 <span class="hljs-attribute">background-color</span>: orange;
 }

<body>
    <input type="text">
    <input type= "button">
body>
html>

CSS列表简单美化

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

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

下面给出代码示例：

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>

    <link rel="stylesheet" href="ccs.css">
head>
<body>

    <div id="nav">
        <h2>淘宝销售h2>
        <ul>
            <li><a href="#">女装a>  <a href="#">男装a>  <a href="#">童装a> li>
            <li><a href="#">女鞋a>  <a href="#">男鞋a>  <a href="#">童鞋a> li>
            <li><a href="#">手机a>  <a href="#">电脑a>  <a href="#">数码a> 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背景主要分为两部分：

背景颜色
背景图片

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

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三大特性，盒子浮动等内容，请多多关注，谢谢

转载请注明：xuhss » CSS基本知识点——带你走进CSS的新世界

xuhss 简单、充实的学习

CSS基本知识点——带你走进CSS的新世界

? 优质资源分享 ?

CSS基本知识点

CSS作用

CSS语法

元素显示模式

CSS写入的三种方式

CSS的四种选择器

CSS层次选择器

结构伪选择器

CSS属性选择器

CSS字体样式

CSS文本样式

CSS超链接伪类

CSS表单常用focus伪选择器

CSS列表简单美化

CSS背景

结束语

您必须登录才能发表评论！

? 优质资源分享 ?

CSS基本知识点

CSS作用

CSS语法

元素显示模式

CSS写入的三种方式

CSS的四种选择器

CSS层次选择器

结构伪选择器

CSS属性选择器

CSS字体样式

CSS文本样式

CSS超链接伪类

CSS表单常用focus伪选择器

CSS列表简单美化

CSS背景

结束语

您必须 登录 才能发表评论！

您必须登录才能发表评论！