【前端】 CSS基础

最新推荐文章于 2024-07-14 10:25:44 发布
最新推荐文章于 2024-07-14 10:25:44 发布
阅读量245 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52360147/article/details/119677685
版权

HTML +CSS

笔记来自黑马前端Pink老师的b站视频，HTML基础较少就没有记

1、HTML

1.1、表单

表单

  • 单选按钮 radio 复选框 checkbox 同一组要有相同的name
  • checked 代表选中的意思
  • value 属性在前端有些看不到， name与value 是给后端使用的
  • submit 是提交属性，点击submit之后表单的内容就会提交
  • button 通过JavaScript 启动脚本

lable 标签

配合表单使用，label 绑定一个表单元素（id），当点击label标签里面的内容时，光标就会自动转到对应的表单元素里面。

<label for="man">男</label> <input type="radio" name="sex" value="男" id="man" checked="checked">

2、CSS

2.1、CSS 选择器

2.1.1、标签选择器
<h1>  <p> 等等的标签

<style>
   h1 {
      color: white;
   }
</style>
2.1.2、类选择器

最常用的选择器

image-20210802212926065

    <style>
        .test1 {
             color: red;
        }
    </style>
    
    <div class="test1">
    </div>

命名规范：

  • 头：header
  • 内容：content
  • 尾：footer
  • 导航：nav
  • 侧栏：siderbar
  • 栏目：column

----->Web前端开发手册

多类名：

  • 一个标签可以指定多个类名，多个类名中间用空格分开

  • 使用场景：将一些标签的公共的样式提取出来，这样修改的时候就十分方便

2.1.3 id 选择器
  • 样式#定义，结构id调用，只能调用一次，别人切勿使用

image-20210802214111756

image-20210802214448156

2.1.4 通配符选择器

image-20210802214749041

2.2、字体属性

2.2.1、字体系列

image-20210802215704469

  • 设置多个字体，这样就会从第一个字体开始，有哪个字体就会使用哪个字体，从前往后。
2.2.2、字体大小

image-20210802220049422

  • 如果body标签中，h标签有些特殊，需要单独指定
2.2.3、文字粗细

image-20210802220800235

2.2.4、文字样式

image-20210802220933089

2.2.5、复合写法

image-20210802221351466

2.3、文本属性

2.3.1、文本颜色

image-20210802222401654

2.3.2、对齐文本

image-20210802222536393

2.3.3、装饰文本

image-20210803081212068

  • 使用none将链接的下划线去掉
2.3.4、文本缩进

image-20210803081509777

2.3.5、行间距

image-20210803083251095

2.4、CSS引入方式

2.4.1、嵌入式

image-20210803083531595

2.4.2、行内式

image-20210803083840510

2.4.3、外部样式表

image-20210803084029483

2.5、Emmet语法

2.5.1、快速生成HTML

image-20210803090132532

2.5.2、快速生成CSS
            text-align: center;    -- tac
            height: 200px;         -- h200
            width: 300px;          -- w300
            text-decoration: none; -- tdn
2.5.3、快速优化代码格式

在setting的emmet：include 设置添加这两句代码

"emmet.includeLanguages": {
  "editor.formatOnType": "true",
  "deitor.formatOnSave": "true"
}

2.6、复合选择器

2.6.1、后代选择器

image-20210803093933099

2.6.2、子代选择器

image-20210803094617684

2.6.3、并集选择器

image-20210803095109285

2.6.4、伪类选择器

多用于链接的使用

    <style>
        /* 1.未访问的连接  把没有点击过的链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* 2. a:visited 选择点击过的链接 */
        a:visited {
            color: orange;
        }
        /* 3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: red;
        }
        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起的那个链接 */
        a:active {
            color: green;
        }

    </style>

image-20210803100157573

image-20210803100207147

2.6.5、:focus 伪类选择器

image-20210803100530517

2.7、CSS元素显示模式

2.7.1、什么是元素显示模式

作用： 网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面

元素选择模式就是元素以什么方式进行显示，比如**

**自己占一行，一行可以放多个span

HTML 一般分为块元素 和行内元素

2.7.2、块元素

image-20210803101626924

2.7.3、行内元素

image-20210803102111561

2.7.4、行内块元素

行内块元素是一个重点

image-20210803102351960

2.7.5、元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解一下：一个模式的元素需要另外一种模式的特性，比如想要增加链接响应的触发范围

  • 转换为块元素：display:block
  • 转换为行内元素:display:inline;
  • 转换为行内块元素 ：display:inline-block
2.7.6、单行文字垂直居中

image-20210803104421508

2.8、CSS背景

2.8.1、背景颜色

image-20210803104642538

2.8.2、背景图片

image-20210803104803585

背景平铺

image-20210803105016147

页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色

背景图片位置（重要）

image-20210803105201583

  • image-20210803105554792

  •     background-position: right center;
    background-position: center right;
    /* 这两个的效果相同，因为 right 、left 只能代表水平  top  bottom只能代表垂直 */

  • image-20210803110410403

背景固定

image-20210803110850991

背景复合写法

image-20210803111211181

背景半透明

image-20210803111358649

2.9 、CSS 三大特性

2.9.1、层叠性

image-20210803112013618

2.9.2、继承性

image-20210803112206224

行高的继承

image-20210803122417591

2.9.3、优先级

image-20210803123052987

image-20210803123511187

image-20210803123915321

3、盒子模型

3.1、看透网页布局本质

image-20210803144703316

3.2、盒子模型的组成

image-20210803145018951

image-20210803145132001

3.3、边框

image-20210803145242929

  • border-style:
    • solid 实线边框
    • dashed 虚线边框
    • dotted 点线边框

边框简写

image-20210803145714156

边框分开写法

image-20210803145919979

合并表格相邻单元格边框

image-20210803150528536

边框会影响盒子的实际大小

image-20210803150719196

3.4、内边距（padding）

image-20210803151003667

简写写法：

image-20210803151131659

padding会影响盒子的实际大小

image-20210803151339608

3.5、外边距（margin）

image-20210803152432581

水平居中

image-20210803152835699

外边距合并问题

image-20210803153142878

3.6、清除网页内外边距

image-20210803153456576

总结

image-20210803155541470

3.7、圆角边框

image-20210803161916966

3.8、盒子阴影

image-20210803162347873

3.9、文字阴影

image-20210803163957436

4、CSS浮动

简单理解就是让多个块级元素排列在一行

image-20210803164537739

4.1、浮动的特性

  • 脱标性

image-20210803165030214

  • 一行显示

image-20210803165205478

  • 浮动元素具有行内块的特性

4.2、浮动搭配标准流

image-20210803165536749

4.3、清除浮动

image-20210803171905282

  • 清除浮动的本质

    image-20210803172015739

语法

image-20210803172115576

方法：

  • 额外标签法（隔墙法，也是W3C推荐的做法）：

image-20210803172502299

  • 父级添加overflow属性

image-20210803173956665

  • 父级添加after属性

image-20210803174208279

  • 父级添加双伪元素

image-20210803174326432

5、项目技巧：

CSS书写顺序

image-20210803195658644

写一个公共类，所有版心都可以直接调用

.w {
   width: 200px;
   margin: auto;
}

image-20210805084819284

导航栏注意点

image-20210803201433953

行内块中间默认有间隙，使用浮动可以去掉

6、CSS定位

6.1、为什么需要定位

image-20210804101104015

6.2、定位组成

image-20210804101418366

6.3、定位模式

image-20210804101617869

6.3.1、静态定位

image-20210804101826327

6.3.2、相对定位

image-20210804102211265

6.3.3、绝对定位

image-20210804102934576

6.3.4、子绝父相

image-20210804103459409

6.3.5、固定定位（fixed）

image-20210804104122776

  • 固定在版心旁边

image-20210804104536369

6.3.6、粘性定位

image-20210804110138901

比如将top: 0px 之后，当距离顶部为0之后该元素就固定住了

6.4、边偏移

image-20210804101532616

6.5、定位叠放次序

image-20210804110834029

6.6、定位的拓展

image-20210804111152343

image-20210804111359046

image-20210804111416083

image-20210804111706526

7、元素显示与隐藏

7.1、display 属性

image-20210804113614789

7.2、visibility

image-20210804113726157

7.3、overflow

image-20210804114015216

8、CSS高级技巧

8.1、精灵图技术

目的： 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

image-20210804131420130

图片移动，不是盒子移动。

8.2、字体图标

image-20210804132048083

image-20210804133206401

使用：

  1. 引入字体文件

    将fonts文件夹放HTML文件的同级目录

image-20210804133302439

  1. 打开Demo复制 特殊字符

  2. font-family: 设置为 ‘icomoon’

8.3、CSS三角

image-20210804135323199

8.4、CSS用户界面

8.4.1、鼠标样式

image-20210804135617333

8.4.2、表单边框线

image-20210804135932142

8.4.3、文本框防拖拽

image-20210804140105249

textarea 尽量写在一行，这样光标定位的时候就不会有间隙了

8.4.4、vertical-align 属性应用

image-20210804140723919

image-20210804140805984

image-20210804140951543

8.4.5、溢出文字省略号

image-20210804141305517

image-20210804141452426

9、常见布局技巧

9.1、margin 负值

image-20210804142101933

9.2、文字围绕浮动元素

浮动元素不会压住文字

9.3、行内块巧用

一个盒子里面如果添加了text-algin:center 那么盒子里面的所有行内块元素和行内元素都会水平居中。

9.4、CSS三角强化

image-20210804153751684

9.5、CSS初始化

        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        button,
        textarea,
        p,
        blockquote,
        th,
        td {
            margin: 0;
            padding: 0;
        }

        body {
            background: #fff;
            color: #555;
            font-size: 14px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }

        td,
        th,
        caption {
            font-size: 14px;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
            font-size: 100%;
        }

        address,
        caption,
        cite,
        code,
        dfn,
        em,
        strong,
        th,
        var {
            font-style: normal;
            font-weight: normal;
        }

        a {
            color: #555;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        img {
            border: none;
        }

        ol,
        ul,
        li {
            list-style: none;
        }

        input,
        textarea,
        select,
        button {
            font: 14px Verdana, Helvetica, Arial, sans-serif;
        }

        table {
            border-collapse: collapse;
        }

        html {
            overflow-y: scroll;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

10、HTML CSS 提高

image-20210804160720698

10.1、HTML5 新特性

10.1.1、语义化标签

image-20210804161049155

10.1.2、多媒体标签

image-20210804161422788

  • 视频

image-20210804161434566

image-20210804161629540

image-20210804164749707

  • 音频

image-20210804164909817

image-20210804164923091

image-20210804165108318

10.1.3、新增input属性

image-20210804165404602

重点记住： number ,tel ,search

10.1.4、新增的表单属性

image-20210804170501590

10.2、CSS3 的新特性

10.2.1、新增选择器
属性选择器

image-20210804171156645

注意：类选择器，属性选择器，伪类选择器，权重为10

结构伪类选择器

image-20210804172357682

前面三个 与后面三个是有区别的 ：

前三个： 现在父容器中给子盒子排序 然后在匹配 排好序子盒子是不是与 E 相匹配，如果排好序的盒子不是与E匹配那么就没有【作用

后三个：先找到 E 的子盒子，然后再进行排序，这样基本都会有作用

image-20210804172809295

伪元素选择器（重点）

image-20210804211353532

10.2.2、CSS3盒子模型

image-20210804214749282

10.2.3、图片模糊

image-20210804214906702

10.2.4、calc 函数

image-20210804215144239

10.2.5、过渡 （重点）

image-20210804215314011

image-20210804215652651

如果多个属性都要变化，那么这样写

transition: width 0.5s ease 1s ,height 0.5s ease 1s;

或者写all

transition： all 0.5s ease 1s;

网站TDK 三大标签 SEO优化

image-20210805091926019

常用类名

image-20210805092532137

热的干面
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的基本使用
pipizhen_的博客
08-12 581
CSS的基本使用： 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 目标： 了解CSS的概念 了解CSS的引入方式 了解CSS的基本用法和常用的选择器 了解CSS的盒子模型，悬浮和定位 了解JS的概念 掌握JS的基本语法，数据类型，能够使用JS完成简单的页面交互 HTML内容简单回顾： 什么是HTML：超文本标记语言 p标签：段落标签 br标签：简单换行 h1-h6：标题标签 hr标签：水平分割线，华丽的分割线 font标签：c
jquery mobile实现拨打电话功能
albert的专栏
07-03 7177
在做一个便民服务电话，用到移动web中列出的电话，点击需要实现调用通讯录，拨打电话功能。 如果需要在移动浏览器中实现拨打电话，发送email，调用sns等功能，jquery mobile提供的接口是一个好办法。 采用url链接的方式，实现在Safari ios，Android 浏览器，webos 浏览器，塞班浏览器，IE，Operamini等主流浏览器，进行拨打电话功能。 1.最
2021-01-29 h5+css 伸缩导航栏
qq_42221321的博客
02-02 965
1、参考资料 （1）视频教程，取自b站 （2）css3中calc、vw、vh、vmin、vmax 属性的应用及兼容性 2、知识点 （1）快捷键使用 快捷生成html标签 参考如下 .navbar>input:checkbox+span2+ul>li5 （2）css样式 1、vh Vh:相对于视框的高度：视框高度是100Vh；“视区”所指为浏览器内部的可视区域大小，window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小 2、
学习篇---自定义SiderBar
get and write
05-05 2191
写了个SiderBar，可以通过点击上面的字母实现对listview的快速定位，简单的写下对listview填充的数据，从A--Z排序 效果图： SiderBar.java import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import andr
【前端】CSS基础
屎蛋的铲屎官
06-15 279
1. CSS优先级
CSS 基础
shshkkkk的博客
05-18 396
CSS 基础 层叠样式表（CascadingStyleSheet，简称：CSS）是为网页添加样式的代码。 它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。 “CSS 规则集”详解 P(选择器) { color(属性): red(属性的值);(声明) } 选择器（Selector）：HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例 子中就是p元素）。要给不同元素添加样式只需要更改选择器就行了。 声明（Declarati...
前端CSS基础-常规流练习.rar
04-09
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
html web前端css基础(7)
01-08
html web前端css基础(7) CSS选择器 作用:规范了页面有哪些元素能够使用声明好的样式。 目的：为了匹配页面的元素。 选择器详情: 元素选择器 特点: 由标记名称作为选择器。主要匹配页面中指定的标记所对应的所有元素...
前端css学习入门资源
02-24
在前端开发领域，CSS（Cascading Style ...通过这些资源，学习者可以系统地学习并实践CSS，为成为合格的前端开发者打下坚实基础。在学习过程中，理论与实践相结合，多做实验，不断尝试，将能更快地掌握这门语言的精髓。
前端基础的学习html+css.zip
01-05
前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css...
前端技术css基础
10-25
CSS基础是每个前端开发者必须掌握的关键技能，它允许我们控制网页的布局、颜色、字体、大小、间距等视觉效果。以下是对CSS基础的详尽解析。 一、CSS语法基础 CSS的基本结构包括选择器和声明。选择器用于定位要应用...
html5鼠标悬停文字变粗,鼠标滑过字体加粗、背景变色的CSS导航栏
weixin_35516624的博客
06-03 1816
背景变色导航栏-www.mb5u.com.wrap{width:210px;margin:20px 300px;}.wrap ul,#listA li{padding:0;margin:0;list-style:none;font-size:12px;}#listA li.on{background:#ccc;background:#f6f6f6;font-weight:bold;}.wrap u...
CSS 属性之中经常出现的百分比（转）
08-27 147
CSS 的属性值中经常会出现百分比，搞清它们的基数是一件很重要的事情。我特意查看了一下 W3C 的 CSS2.1 标准，在此整理下： 百分比单位 乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width 乘以包含块的高度 top, bottom, height, max-heigh...
CSS基础学习——元素显示模式&背景
weixin_61920612的博客
01-23 721
CSS基础学习——元素显示模式&背景
1个div，你能用CSS常规属性绘制：正3、4、5、6、7、8边形吗？
weixin_45552104的博客
08-31 547
**一、正三角形** 正三角形不需要用到伪元素，只需要设定div本身的边框宽度即可产生，先来看一下正三角形的边长与中线，若边长为100px，则中线四舍五入就是87px（100 x sin（ 60）= 87）。 因此我们要将div的长宽都设为0，接着把底部border的宽度设为为87px，左右的border width度设为50px（颜色设为透明），就可以做出一个漂亮的三角形。 .a{ w...
css显示电话号码
马海宝
10-14 1808
1， default: 2，鼠标移上去: 来源： 今天在同事的手机的电话薄里面发现的，发现他存的电话号码都是显示名字，然后只要往下移动，就能显示这个
CSS学习笔记
qq_44375810的博客
11-14 294
CSS 1.什么是CSS Cascading Style Sheet 层叠样式表 CSS：表现（美化网页） 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动… 2.CSS发展史 CSS1.0 CSS2.0 DIV(块) + CSS,HTML与CSS结构分离的思想，网页变得简单，SEO CSS2.1 浮动、定位 CSS3.0 圆角、阴影、动画… 浏览器兼容性 3.CSS快速入门及优势 入门： <!DOCTYPE html> <html lang="en">
CSS 技巧与案例详解：开篇介绍
最新发布
粉丝们务必加入微信粉丝群
07-14 658
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
"前端CSS基础入门：选择器、导入、美化与练习
.wrapper { margin: 0 auto;...以上是一个关于前端CSS基础入门的介绍和学习记录，内容涵盖了选择器、声明、导入方式、注释、页面美化等多个方面。希望这篇记录对于初学者有所帮助，也欢迎交流和指正，谢谢！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值