正文

前端学习-基础部分-css(代码片段)

gbq-dog  gbq-dog  2022-12-04  155

关键词：

开始今日份整理

1.CSS的导入方式

CSS的导入方式主要是有内联模式，行内模式，外部样式表

1.1 内联模式

内联模式：直接在<head>中直接写css，例如

p
        color:rgb(166, 226, 226);
    
#设置P标签的颜色

1.2 行内模式

行内模式：在html中对应元素直接书写

<p style="color:cadetblue">第一段 世界大势，合久必分，分久必合</p>

1.3 外部样式表

外部样式表，主要是有俩种，一种为链接式，一种为外联样式表

<link rel="stylesheet" href="index.css">
<!-- CSS2.1的样式 -->
@import.url()

俩者的区别如下

一个是全部导入后，才开始编译，包括css，<link>方式
一个是先导入html进行编译，然后在将css文件加载到网页中 <@import>方式

2.CSS选择器

css的选择器主要分基本选择器以及高级选择器

2.1 基本选择器

技术图片

通用元素选择器 *: 匹配任意元素，一般用于清楚网页的默认样式
标签选择器：匹配所有指定标签的样式，不管样式有多深，都可以匹配，选中既所有，并不是单一的一个
id选择器：根据指定的id匹配标签，id在网页中全局唯一，一般留给后面js中调用，获取到标签
class类选择器：根据指定的class匹配标签

注：一定要有公共类的概念，不要试图用一个类完整一个网页，尽量把类拆分出来，每个类尽量的小，让更多的标签去使用，同一个标签可以携带多个类，类与类之间用空格隔开即可。

基本应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        /*标签选择器*/
        body
            background: #b6bbb2;
        
        div
            background: #747F8C;
            color: red;
        
        /*id选择器*/
        #h1
            color: #501c56;
        
        /*class选择器*/
        .c1
            background: #2d4ca2;
            color: #41db50;
        
    </style>
</head>
<body>
<h1 id="h1">id</h1>
<div>
    <p>内容1</p>
</div>
<span class="c1">class1</span>
<div>
    <p>内容2</p>
</div>
<span class="c1">class1</span>
<span class="c1">class1</span>
</body>
</html>

基本应用

2.2 高级选择器

2.2.1 后代选择器

2.2.2 儿子选择器

2.2.3 并集选择器

2.2.4 交集选择器

2.2.5 属性选择器

前端学习css基础(代码片段)

目录引言一、初识CSSCSS的作用CSS的注释CSS样式表二、CSS选择器CSS基础选择器三、CSS样式font字体样式CSS外观属性四、标签显示模式标签显示模式转换display五、CSS三大特性CSS层叠性CSS继承性CSS优先级六、⭐盒子模型盒子模型简介盒... 查看详情

前端基础只是学习(代码片段)

目录第十一章前端开发11.1html基础1.创建html文件2.基本格式3.head标签(5)4.body标签(7)11.2CSS基础1.div标签2.lable标签2.css(层叠样式表)3.css选择器11.3CSS浮动内容回顾：1.div和span标签在网页中的作用2.css基础选择器和高级选择器有哪些？3.... 查看详情

web前端学习-css(代码片段)

web前端学习-CSS1CSS基础1.1CSS的基础认知1.2CSS基础选择器1.2.1标签选择器1.2.2类选择器1.2.3id选择器1.2.4通配符选择器1.3文字和文本样式2CSS的进阶2.1CSS的选择器2.1.1选择器-后代2.1.2选择器-子代2.1.3选择器-并集2.1.4选择器-交集2.1.5选择器... 查看详情

前端基础学习--攻破css盒模型(代码片段)

盒模型认识盒模型所有HTML标签都可以看成是矩形盒子，有width、height、padding、border构成，称为"盒模型"；width、height不是盒子的总宽高盒子的总宽度=width+左右padding+左右border盒子的总高度=height+上... 查看详情

前端基础学习css过渡与动画(代码片段)

transition过渡transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”；兼容性良好，动画更细腻，内存开销小；过渡的基本使用transition属性基本使用transition有四... 查看详情

html基础入门(代码片段)

学习推荐地址w3school一、HTML页面结构1、前端前端开始中最基本的也是最必须的三个技能，前端的开发中，在页面的布局时：HTML：页面结构，可以把他看成一个文档，定于展示页面的内容结构CSS：页面表现，元素的大小、颜色、... 查看详情

前端学习知识点补充(代码片段)

前端基础css入门(代码片段)

【前端基础】CSS介绍css的介绍1.css的定义2.css的作用3.css的基本语法4.小结css的引入方式1.行内式2.内嵌式（内部样式）3.外链式4.css引入方式选择5.小结css的介绍学习目标能够知道css的作用1.css的定义css(CascadingStyleSheet)层叠样... 查看详情

web前端基础资料分享(代码片段)

...。本人除了学习考研之外知识之外，还学习了一些Web前端的知识，哈哈哈。当然，我也做了一些相关的笔记。大家如果需要的话，大家可以先去下载eDiary这一款软件，然后私信我ÿ 查看详情

web前端基础资料分享(代码片段)

前端三大组成部分(代码片段)

学习前端算是有段时间了吧，现在算是对前端有个大概的认识了，先来总结一下前端所包括的主要内容，对自己的学习来个小结。前端简单说就是我们能够看到的东西，比如页面内容，颜色，图片等，后端主要负责的是后台数据... 查看详情

htmlanimation前端就业课第二阶段css零基础到实战（06）(代码片段)

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。一、Animation基础使用Animation可以设置帧动画，与... 查看详情

htmlanimation前端就业课第二阶段css零基础到实战（06）(代码片段)

css总结前端三剑客之一（css基础）(代码片段)

上一篇文章，我们介绍了HTML语言的基础用法后，今天我们继续学习CSS的基础语法。CSS，又称为层叠样式表(CascadingStyleSheets)。CSS能够对网页中元素位置的排版进行像素级精准控制，实现美化页面的效果，能够做... 查看详情

web前端培训都有哪些课程

...技术-网站前后端交互、jQuery交互效果开发第三阶段NodeJS前端架构及后台开发：版本控制工具、NodeJS核心技术第四阶段前端框架：Vuejs全家桶-Vue、React框架-React、微信小程序、Flutter第五阶段小程序开发：能够独立开发小程序，提... 查看详情

前端就业课第二阶段css零基础到实战（04）定位(代码片段)

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。一、定位定位分为相对定位以及绝对定位。相对定... 查看详情

前端就业课第二阶段css零基础到实战（04）定位(代码片段)

web前端培训课程内容都有哪些？

web前端培训课程内容包括三个部分：基础部分、设计部分和代码部分。web前端培训推荐粤嵌IT培训，该机构师资力量强大，口碑极佳。web前端培训课程内容具体如下：1、基础部分，包含美术基础和PS、AI的使用。PS需要学习常用工... 查看详情