CSS自学笔记及简单练习

最新推荐文章于 2024-06-18 17:22:31 发布

lee_824

最新推荐文章于 2024-06-18 17:22:31 发布

阅读量429

点赞数 1

分类专栏： WEB学习文章标签： css html web

本文链接：https://blog.csdn.net/lee_goi/article/details/114591739

版权

WEB学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文主要是由理论知识，设计实践两大部分组成，理论知识中有关于对相关重点的理解，结合自己的想法做了一个游乐场排队系统的简单界面。还是很丑陋，会不断完善.后续自学了一些相关课程。

一、CSS简介

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

它包含了如：整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

内容HTML和表现CSS的分离在代码的撰写与维护过程中，内容如果和修饰分离，便于维护。

二、CSS 语法

🔥 基本语法及解释

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:

h1 {color:blue;front-size:12px}

h1是选择器
color；front-size：为属性
blue；12-px：值

这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。

选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性）是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
/*。。。。*/为注释，其注释跟C语言中的注释一样，不同于HTML的注释

对于color，可以如上面所示选取颜色，当然也可以通过RGB来组件自己的颜色比如#ffffff，没两位代表一个颜色分别是红绿蓝，可以设置16进制rgb来给颜色

对于font-size：分为像素点大小和%大小，一般对我们来说采取百分比更好一点，方便我们对图片的整体浏览。对于默认的像素点来说是16px

🔥 选择器

有两种id和class，一般来说class用得更多一点儿(我在这里调试了class选择器)

id选择器是以#开头

id选择器适用范围只有一个元素

class选择器是以.开头

/*线路规划与排队状态 */
.state{
    background: chocolate;
    color: cyan;

}
.line{
    background-color: crimson;
    color:gold;

}

上面的代码给了背景和字体颜色
如下所示的页面：

  <div class="state"><a href="#" target="_blank">各项目等待人数与等待时</a></div>
  <div class='line'><a href="#" target="_blank">路线规划</a></div>>

由上例可看出，元素的class值可以多个，也可以重复。因此，实际应用中，class 选择器应用非常普遍。

三、 CSS 如何生效

三种方法：外部样式表，内部样式表，内联样式

当然，我们最需要学会的就是外部样式表，这种便于维护

🔥 外部样式表

新建如下内容的一个 HTML文件（后缀为.html)：

<!DOCTYPE html>
<html>

    <head>
        <!-- Basic -->
        <meta charset="utf-8">
        <!-- 基本css -->
        <link rel="stylesheet" href="./css/prj_1.css">
        <!-- 特殊css -->
        <link rel="stylesheet" href="./css/prj_2.css">

        <!-- Site Meta -->
        <title>游乐场排队系统</title>
        <link rel="shortcut icon" href="./image/游乐场.ico" type="image/x-icon" />
    </head>

    <body>
        <h1>游乐场排队系统</h1>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20190223%2F50eb818b909347e8acd6b64456608966.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617867560&t=09596d465805e13e2a28a6fe9e4eb805" alt="error" width="50%" height="400px"  >
        <div class="state"><a href="#" target="_blank">各项目等待人数与等待时间</a></div>
        <div class='line'><a href="#" target="_blank">路线规划</a></div>
    </body>

</html>

我在同一个目录下建立了css文件夹，下面放了两个文件prj_1.css和prj_2.css一个存放基本的css修饰，一个存放class选择器

提示： 文件时路径就变为 ./css/mycss.css之类的。

很重要的是，通过这种操作，我们可以复用

接下来的两种样式，我就是复制了教程里面的代码，实现了一下，并未做出什么修改

🔥 内部样式表

我们也可以将样式放在 HTML 文件中，这称为内部样式表。如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

该例子与上述例子一样的效果，但注意在<head>元素中引入了<style>标签，放入了样式。

提示： 一般而言，只有页面的样式规则较少时可采用这种方式。

🔥 内联样式

所谓内联样式，就是直接把样式规则直接写到要应用的元素中，如：

<h3 style="color:green;">I am a heading</h3>

提示： 内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。

🔥 级联的优先级

优先级的高低如下：

内联样式
内部样式表或外部样式表
浏览器缺省样式

提示： 其实，一句话可总结为哪个样式定义离元素的距离近，哪个就生效。

思考： 上面优先级第2项有内部样式表和外部样式表两个，到底哪个优先？

四、盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：

box

说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

html代码还是如上，但是prj2_css文件里的代码做出以下修改

.img1{
    width:"50%";
    height:"400px";
    padding: 15px;
    margin: 25px;
}
.state{
    height: 200px;
    width: 200px;
    border:  5px solid lightsteelblue;
    padding: 25px;
    margin: 25px;
    background:deepskyblue;
    color:floralwhite;
    font-size: 20px;

}
.line{
    height: 200px;
    width: 200px;
    border: 10px solid gray;
    padding: 25px solid red;
    margin: 25px;
    background-color:forestgreen;
    color:ghostwhite;
    font-size: 20px;
}

打开浏览器看看效果。

提示： 在页面上点击鼠标右键，选择审查元素，你可清楚看到如下图所示的布局。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2JHJJiDo-1615282678119)(https://qige.io/web/brief-css/img/4bc1c350e350a023.jpg)]

留意上图，你会发现一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距

因此，我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度。

五、边框与边距

提示： 无论边框、内边距还是外边距，它们都有上下左右四个方向。

.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

比如我在当前代码的盒子里设置各圆角
或者只设置左边的颜色，当然和内容之间的距离可以用padding来设置，只要加-left/right/bottom等

🔥 边距

下面样式说明了内边距的设置：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

注意顺序为上下左右，顺时针方向

做出如下修改：

 border-left: 7px solid yellow;
 border-radius: 15px; /* 边框圆角 */

加入圆角元素与设置为左边框

六、定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态
relative 相对
fixed 固定
absolute 绝对

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

🔥 static

设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

🔥 relative

设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移
试试如下的代码：

可以用它来设置相对位置

🔥 fixed

设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
然后可以根据可见区域来设置存在位置，我设计了一个关于我们的图标悬浮于右上口，并且根据教程做了一个阴影立体感

.fixed1 {
    position: fixed;
    top: 20px;
    right: 10px;
    padding: 6px 24px;
    border-radius: 4px;
    color: #fff;
    background-color:turquoise;
    cursor: pointer;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  }

🔥 absolute

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。

七、浮动

这种用法非常常用对于我们对元素的排列十分有用

在选择器里面加如下

.float_left{
    float: left;
}

一个浮动元素会尽量向左移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。

结果就好看很多：

一个元素浮动后，其后的元素将尽可能包围它，或者说出现在这个浮动元素的左或右方。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。

八、最终结果

九、补充视频学习

🎏 id选择器

id是不能重复的，一个用过了另一个就不能再用了

🎏 class类

class可以重复

🎏 交集并集选择器

作用：选中同时符合多个条件的元素

格式：选择器1 选择器2 选择器3…全部满足才行

div.red{
                font-size: 20px;
            }

注意：交集选择器中如果有元素选择器必须使用元素选择器开头

 h1,span{
                color: lightcoral;
            }

并集选择器，可以同时作用多个选择器

🎏 父元素与子元素与祖先元素，兄弟元素

父元素

直接包含子元素的元素叫父元素

祖先元素

祖先元素，直接包含后台带元素的元素叫祖先元素，父元素也属于祖先元素，后代元素也可以定义了

兄弟元素

兄弟元素，拥有相同父元素的元素

直接被父元素包含的元素是子元素

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素，

复合选择器可以混合使用

🎏 关系选择器

子元素选择器

作用：选择指定元素的指定子元素

结论：父元素>子元素

后代元素选择器

作用：选择中指定元素内的指定代元素

语法：祖先后代

兄弟元素选择器

作用：选择下一个兄弟

语法：前一个+下一个

🎏 属性选择器

title鼠标移上去就会提示

[属性名]选择含有指定属性的元素

[属性名=属性值] 选择含有指定属性和指定值的元素

[属性值^=属性值] 选择属性名与属性值开头的元素，结尾用$

[属性名*=属性值]选择属性值中含有某值的元素的元素

🎏 伪类选择器

根据ul>li 可以直接生成

ul>li*5

vs自带插件，会处理

伪类，不存在的类，用来描述一个元素的特殊状态

比如第一个子元素，背点击的元素，鼠标移入的元素

特点：一般情况下，都是以：开头

            ul>li:first-child{
                color:red;
            }

first-child第一个子元素

last-child最后一个元素值

nth-child()选中那个填入特殊值即可

nth-child(2n)表示选中偶数个2n+1表示奇数位

以上这些伪类，都是根据所有子元素进行排序

first-of-type

last-of-type

nth-of-type

只找相同类型

not()否定伪类，将符合条件的元素从选择器中去除

ul>li:not(:nth-of-type(3)){

}

除了的意思

超链接元素的伪类

a:link：表示没有访问过的连接

a:visited：表示访问过的链接

用来表示访问过的连接

由于隐私的原因，visited只能改颜色

下面两种都可以用：

:hover表示鼠标移入状态时变化

:active表示点击不移开

伪元素选择器

首字母下沉效果;

p::first-letter{

	font-size:50px;

}

p::first-line{

background-color:yellow;

}
div::before{
    content: '('
}
div::before{
    content:')'
}

前后会加上括号

🎏餐厅练习介绍

lee_824

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS自学笔记及简单练习

CSS自学笔记本文主要是由理论知识，设计实践两大部分组成，理论知识中有关于对相关重点的理解，结合自己的想法做了一个游乐场排队系统的简单界面。还是很丑陋，会不断完善一、CSS简介CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。它包含了如：整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。内容HTML和表现CSS的分离在代码的撰写与维护过程中，内容如果和修饰分离，便于维
复制链接

扫一扫