前端基础知识概览（css）

已于 2023-09-14 22:09:08 修改
阅读量31 收藏
点赞数
文章标签： 状态模式
于 2023-09-14 22:03:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luoyerrr/article/details/132891638
版权

上一篇文章已概述了 前端的组成以及前端常用的 html标签

那这篇文章就只讨论 CSS。

众所周知如果拿html和房子作比较的话 ：html相当于 房子的基本骨架 没有瓷砖和粉刷修饰 ， 就显得很单调，而 CSS就完美的解决了html的单调， 让页面更好看。

好的 ， 那接下来步入正题吧

CSS简介：

层叠样式表

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。

作用:给页面排版写样式.W3C要求内容和样式分离.html专门负责展示内容, css专门负责排版.后缀名:.css

页面引入CSS的方式 :

如果给一个地方设置多种样式,谁最后执行就显示谁的样式.(就近原则)

行内css :(不推荐)

直接在标签中用style属性写样式.(不提倡使用)

优点:使用方法. 缺点:不能实现样式利用;违反W3C规范.

<!--行内css-->
<h1 style="color: red;">我是中国人</h1>

内部css:（不推荐）

在<head>标签中写css.

优点:可以实现页面内样式利用;符合W3C规范 缺点:不能实现页面间样式利用;

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>页面引入css的方式</title>
                <!--内部css-->
                <style type="text/css">
                        h2{
                                color: blue;
                        }
                </style>
        </head>
        <body>
                <h2>good good study,day day up</h2>
        </body>
</html>
​

外部css:(推荐)

创建一个外部css文件写css代码,哪个页面想使用这个css样式就引入.

优点:可以实现页面间样式利用;符合W3C规范; 缺点:要单独写文件.

css

h3{
        color: green;
}

html

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>页面引入css的方式</title>
                <!--内部css-->
                <style type="text/css">
                        h2{
                                color: blue;
                        }
                </style>
                <!--引入外部css-->
                <link rel="stylesheet" href="css/1.css" />
                
        </head>
        <body>
                <!--行内css-->
                <h1 style="color: red;">我是中国人</h1>
                <h2>good good study,day day up</h2>
                <h2>今天天气不错</h2>
                <h3>dfieiiedfa吃了没?</h3>
        </body>
</html>

导入外部css:(了解)

创建一个外部css文件写css代码,哪个页面想使用这个css样式就在<head>标签中导入.

特点:运行时先加载当前html页面,再加载导入css样式.

<!--导入外部css-->
<style type="text/css">
    @import url("css/test.css");
</style>

外部CSS 对比 导入CSS

  • 浏览器支持性不同:所有浏览器支持外部css;只有部分浏览器支持导入css.

  • 加载时间不同:外部css和当前html页面合二为一,一起加载;

    导入css是先加载当前html页面,再加载导入的css;

  • js支持性不同:外部css支持用javaScript代码动态修改; 导入css不支持javaScript代码动态修改;

css的语法总结

选择器{
    样式属性名1:值1;
    样式属性名2:值2;
    ...
  }

注释:

给代码写解释说明.

/*注释的内容*/

选择器:

优先级:id选择器>类选择器>标签选择

标签选择器:

直接以html标签作为选择器,选中页面上这一类标签.

/*标签选择器*/ 
h1{
     color: red;
   }

类选择器

给想要设置样式的地方用class="类名"取类名,

.类名表示选中这一类标签.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>选择器的使用</title>
                <!--内部css-->
                <style type="text/css">
                        /*标签选择器*/
                        h1{
                                color: red;
                        }
                        
                        /*类选择器*/
                        .a1{
                                color: orange;
                        }
                        
                </style>
        </head>
        <body>
                <h1>学知识的过程:</h1>
                <!--给标签取类名-->
                <h2 class="a1 a2 a3">知道有这个知识存在</h2>
                <h2 class="a1">这个知识做什么用的</h2>
                <h2>这个知识怎么用的</h2>
                <h2>这个知识用在什么地方</h2>
        </body>
</html>

id选择器:

给标签用id="id名"取id名,用#id名表示选中这个标签.

注意:在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>选择器的使用</title>
                <!--内部css-->
                <style type="text/css">
                        #d1{
                                color: purple;
                        }
                        
                </style>
        </head>
        <body>
                <!--给标签取id名-->
                <div id="d1">
                        大家好
                </div>
                
        </body>
</html>

通配选择器(全局选择器):

*表示选整个页面上所有标签.

/*全局选择器*/
*{
    background-color: greenyellow;
}

子选择器:

表示选中指定标签中另一类标签(只管儿子这一代).选择器间用>分隔

/*子选择器*/
ul>span{
    color: pink;
}

后代选择器:

表示选中指定标签中所有另一类标签.选择器间用空格分隔

/*后代选择器*/
ul span{
	color: pink;
}

群组选择器:

用多种不同方式选中标签,设置相同样式.选择器间用逗号分隔

/*群组选择器*/
div,.a1,#d4{
    color: red;
}

属性选择器:

表示选中的标签指定属性特征.选择器[属性名]

/*属性选择器*/
h2[class$="a2"]{
    color: red;
}

nth-child(n) 选择器:

规定属于其父元素的第二个子元素的每个 p 的背景色：

n 可以是一个数字，一个关键字，或者一个公式

p:nth-child(2)
{
	background:#ff0000;
}

超链接伪类样式

未访问的链接

a:link {
  color: #FF0000;
}

已访问的链接

a:visited {
  color: #00FF00;
}

鼠标悬停链接

a:hover {
  color: #FF00FF;
}

已选择的链接

a:active {
  color: #0000FF;
}

CSS中常用样式

字体样式

color字体颜色; font-size字体大小; font-weight 字体的粗细。 font-family 字体的类型,eg:"宋体" font-style 字体倾斜 font:倾斜 粗细 大小/行高 类型;

<html>
        <head>
                <meta charset="UTF-8">
                <title>2.css中常用样式属性</title>
                <!--内部css-->
                <style type="text/css">
                        #d1{
                                /*字体颜色*/
                                color: red;
                                /*字体大小*/
                                /*font-size: 30px;*/
                                
                                /*粗细*/
                                /*font-weight: bolder;*/
                                /*倾斜*/
                                /*font-style: italic;*/
                                /*类型*/
                                /*font-family:"楷体";*/
                                
                                font:italic bolder 30px "楷体";
                                
                        }
                        
                </style>
        </head>
        <body>
                <div id="d1">Hello world</div>
                <div>非常好,一起学Java</div>
        </body>
</html>

文本样式

text-align 文本水平对齐 text-decoration 文本修饰 line-height 行高 letter-spacing 字符间距 text-indent 首选缩进

.c2{
    /*水平居中
    text-align: center;*/
    /*文本修饰
    text-decoration: underline;*/
    /*行高*/
    line-height: 100px;

    /*首选缩进*/
    text-indent: 50px;

    /*字符间距*/
    letter-spacing: 10px;

}

/*去掉超链接下划线*/
a{
    text-decoration: none;
}

背景样式

注意:

  • 因为背景图片会将背景颜色覆盖,所以一般情况不用给同一个地方同时设置背景颜色和背景图片.

  • 顺斜杠:/,它表示网络路径;反斜杠:\,它表示window路径;

  • 图片标签的路径中顺斜杠和反斜杠都可用

  • 背景图片的路径中只认顺斜杠.

综上所述:以后无特殊情况只要是路径全用顺斜杠.

background-color 背景颜色 background-image:url(图片相对路径); background-repeat 背景平铺方式 background: 背景颜色 url(背景图片) 平铺方式;

body{
    /*背景颜色
    background-color: red;*/
    /*背景图片
    background-image: url("img/gameBg2.jpg");*/
    /*背景平铺方式
    background-repeat: no-repeat;*/
    /*背景总样式*/
    background: red url(img\gameBg2.jpg) repeat;
}

列表样式

list-style 列表样式 list-style-type 列表类型(样式) list-style-image 列表图片 list-style-position 列表图片或图片的位置

li{
    /*边框线*/
    border: solid 1px red;
    /*列表类型*/
    /*list-style: none;去掉列图标*/
    list-style-type:decimal;
    /*列表图片:在同一个地方不要同时设置列表图标和图片*/
    list-style-image: url(img/sub-3.gif);
    /*列表图标或图片位置*/
    list-style-position: inside;
}

拓展样式

display:none(隐藏)/block(将元素将显示为块级元素)/inline(将元素将显示为行级(内联)元素)

.c3 {
    width: 300px;
    height: 60px;
    border: solid 1px red;
    display:none;
}

文本溢出:overflow: visible(全部显示)|hidden(超出部分隐藏)|croll(超出部分用滚动条展示);

.c3{
    width: 300px;
    height: 60px;
    border: solid 1px red;
    /*文本溢出*/
    overflow: scroll;
}

#d4{
    width: 300px;
    height: 50px;
    /*超过部分隐藏*/
    overflow: hidden;
}

#d4:hover{
    /*超过部分全部显示*/
    overflow: visible;
}

盒子模型

css中将每个标签看作盒子模型. 方位顺序:上右下左 注意:一般情况下,所有标签默认都有内外边距.

边框线border:每个标签都可以设置边框线. 内边距padding:标签内容距离边框线之间距离叫内边距. 外边距margin:标签边框线与周围元素的距离. 盒子模型的宽度=元素宽度+左右内边距+左右边框线. 盒子模型的高度=元素高度+上下内边距+上下边框线.

注意:盒子模型样式一般用来设置元素与周围元素间距离,能用外边距调整,就不要用内边距.

/*去掉所有标签内外边距*/
*{
    margin: 0px;
    padding: 0px;
}
/*设置整个模块水平居中,配置模块width属性一起使用*/
margin: 0px auto;

position定位:

static(静态定位,默认),

relative(相对定位),

absolute(绝对定位),

fixed(固定定位).

relative(相对定位):

相对自身原来的位置发生偏移,元素没有脱离标准文档流,还是占着原来的位置,不影响周围元素. 作用:微调元素距离.

/*相对定位*/
position: relative;
left: -150px;
top:-100px;

absolute(绝对定位):

绝对定位相对设置了position的父标签来定位的,如果当前元素所有父标签没有设置position,相对于浏览器容器左上角(原点)定位.绝对定位的元素脱离标准的文档流,不占原页面的位置,那么后面元素会受影响. 作用:作二级漂浮菜单.

/*绝对定位*/
position: absolute;
top:100px;
left: 200px;

fixed(固定定位):

相对浏览器窗口定位.配合设置元素层次的属性一起使用. z-index:数字(层次);0层是当前标准html页面,大于0层. 作用:作流氓广告.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>3.定位</title>
                <!--内部css-->
                <style type="text/css">
                        /*去掉内外边距*/
                        *{
                                margin: 0px;
                                padding: 0px;
                        }
                        
                        #container{
                                width: 500px;
                                height: 2600px;
                                border: solid 1px black;
                                margin: 0px auto;
                        }
                        
                        #d1,#d2,#d3{
                                width: 400px;
                                height: 100px;
                                margin-top: 50px;
                                margin-left: 50px;
                                
                        }
                        
                        #d1{
                                border: solid 1px green;
                        }
                        
                        #d2{
                                border: solid 1px red;
                                
                                /*相对定位
                                position: relative;
                                left: -150px;
                                top:-100px;*/
                                
                                /*绝对定位
                                position: absolute;
                                top:100px;
                                left: 200px;*/
                                
                        }
                        
                        #d3{
                                border: solid 1px blue;
                        }
                        
                        #img4{
                                /*固定定位*/
                                position: fixed;
                                left: 400px;
                                top: 200px;
                                /*设置元素层次*/
                                z-index: 1;
                        }
                        
                        #img5{
                                /*固定定位*/
                                position: fixed;
                                left: 886px;
                                top: 200px;
                                /*设置元素层次*/
                                z-index: 2;
                        }
                
                </style>
        </head>
        <body>
                <img id="img4" src="img/img-3.jpg"/>
                <a href="http://www.4399.com"><img id="img5" src="img/x.jpg"/></a>
                <div id="container">
                        <div id="d1">111</div>
                        <div id="d2">222</div>
                        <div id="d3">333</div>
                </div>
        </body>
</html>

浮动(float):

让块级元素变成行级元素.注意:浮动元素会影响后面紧跟着的元素. 后面元素不想受影响,要用

clear:left/right/both;

float:left/right;

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>4.浮动</title>
                <!--内部css-->
                <style type="text/css">
                        /*去掉所有标签内外边距*/
                        *{
                                margin: 0px;
                                padding: 0px;
                        }
                        
                        ul{
                                width:1000px;
                                height: 50px;
                                background-color: #FF0000;
                                /*整体水平居中*/
                                margin: 0px auto;
                        }
                        
                        li{
                                /*去掉列表项图标*/
                                list-style: none;
                                width: 100px;
                                height: 50px;
                                line-height: 50px;
                                text-align: center;
                                /*浮动*/
                                float: left;
                        }
                        
                        li:hover{
                                background-color: darkred;
                        }
                        
                        p{
                                /*清除浮动*/
                                clear: both;
                        }
                </style>
        </head>
        <body>
                <ul>
                        <li>首页</li>
                        <li>家用电器</li>
                        <li>手机数码</li>
                        <li>服饰</li>
                        <li>日用百货</li>
                        <li>美妆</li>
                        <p>这是一个p标签</p>
                </ul>
        </body>
</html>

CSS布局:(重点)

整体布局:div+css 导航条/左右侧菜单:div+ul-li+css 图文混排:div+dl-dt-dd+css 规整表单:form+table 文本水平居中:text-align:center; 文本垂直居中:line-height 模块水平居中:margin:0px auto;配置width属性一起设置. 微调元素位置,首选外边距,其次内边距,最后才会考虑相对定位. 如果一行既有文字又有图片,文字想与图片垂直居中对齐,设置图片的vertical-align: middle;

以上九点是完成一个静态页面的重要要素 ， 如果掌握了这九点要素 ，我相信前端对于你来说是易入反掌 ，

总结

1.div和span标签.(重点) 2.框架集 3.内联框架(重点) 4.特殊符号 5.css概念 6.页面引入css方式.

7.css总语法(重点) 8.css注释 9.8种常用选择器

10.超链接伪类样式4种. 11.常用字体样式5种 12.常用文本样式5种 13.常用背景样式3种 14.常用列表样式4种 15.扩展display,overflow 16.盒子模型 17.定位四种 18.浮动和清除浮动

参考文档：

具体参考文档

座右铭

万丈高楼平地起，多点技术，多粒米。

联系方式

感谢您阅读我的博客！如果您对其中的内容有任何疑问、想法或意见，欢迎在评论区留言或通过上述联系方式与我交流。

不止秋风（IT）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端基础知识(css+js+vue)概览
10-13
总的来说，前端基础知识的学习包括理解CSS盒子模型、熟练使用CSS布局技术、掌握JavaScript的核心概念和特性，以及学会使用Vue.js这样的现代前端框架简化开发流程。通过学习这些知识，开发者能够创建响应式的、动态的...
第2章 HTML5基础-HTML5+CSS3 Web前端开发与实例教程（微课视频版）配套PPT
06-09
### 第2章 HTML5基础-HTML5+CSS3 Web前端开发与实例教程（微课视频版）配套PPT #### 知识点概览 ...DOCTYPE>`, `<html>`, `<head>`...这些基础知识不仅对于初学者非常重要，对于进阶的Web开发者来说也是非常关键的基石。
web前端基础知识概览
ActStrady
04-17 163
html部分 通用的几个属性 title 设置元素的文本标题，在鼠标指向时会悬浮出标题 tabindex 指定元素在tab键遍历控件时的访问顺序，就是说按tab键时的访问顺序 表格属性 cellspacing 单元格间距 cellpadding单元格内边距 几个常用标签 head 标签 mate 提供关于页面的描述信息 比如设置字符集和用于搜索引擎的关键字 body 标签 spa...
前端基础知识整理
weixin_42767674的博客
05-08 5412
一、基础部分 1.Web标准的构成：主要包括结构（Strcture）、表现（Presentation）和行为（Behavior）。 结构：结构用于对网页元素进行整理和分类，html 表现：设置网页元素的版式、颜色、大小等外观样式，主要指css 行为：网页模型的定义以及交互的编写，js 二、HTML 1.HTML标签的关系有包含关系和并列关系两种 ...
大前端知识点概览
acm_cn1234567890的博客
07-29 1277
html-css js基础
Vue2基础知识概览与总结
qq_40529733的博客
07-10 1648
Vue2的模版语法、生命周期等内容。有例子，较详细
前端重要知识概述（基础篇），附带面经
初尘屿风的博客
02-23 797
前端的相关知识概述，从头学习前端“三剑客”（HTML5、Css、JavaScript），共分基础篇（HTML5）、进阶篇（Css）和高级篇（JavaScript）！本篇为基础篇！
前端基础知识（html）
luoyerrr的博客
08-29 118
前端页面的组成及其作用。不同浏览器内核导致的兼容性问题。常用的前端开发工具。HTML的基本概念，包括标签、属性等。XHTML规范和文档声明。HTML的基本结构和常用头部、body标签。框架集、内联框架以及特殊符号的使用。
前端知识点
m0_62095536的博客
08-02 162
事件委托的原理是利用事件冒泡的特性。③js有一个事件循环机制，js是单线程的语言，有一个主线程负责执行代码，所有任务都按照顺序放到这个执行队列中，每次按照先同步后异步，先微任务后宏任务的顺序执行，当每次执行队列完成以后，就会继续往队列中添加之前的异步任务，不断循环这个过程。原型链又叫隐式原型链，创建对象时，每一个对象都有一个__proto__属性，他指向该对象的原型，当调用属性和对象的方法时，__proto__会在对象自身查找，然后去构造函数查找，然后去原型的原型上查找，这个查找的过程就叫做原型链。
探索前端世界：HTML、CSS和JavaScript入门概述
dsfdaifeng的博客
11-05 754
我是学化工的海潮，分享下自己学习前端的知识。在现代的网页开发中，HTML、CSS 和 JavaScript 被默认称为前端三大件，。它们共同构成了构建互联网世界的基石，也是是vue,react等热门前端框架的基础，为我们创造出美观、交互性强的网页和应用程序。无论是开发简单的静态网页还是复杂的网络应用程序，熟练掌握 HTML、CSS 和 JavaScript 都是至关重要的。它们的组合使用让我们能够构建出精美、功能丰富的网页，将我们的创意和想法传达给全世界。
从零开始：前端架构师的基础建设和架构设计之路
程序边界
12-16 8447
前端架构师是现代软件开发中的重要角色。他们需要具备扎实的前端技术基础，以及良好的基础建设和架构设计能力。通过合理的基础建设和架构设计，我们可以构建出稳定、高效、可扩展的前端系统，提高用户体验，提升团队的整体技术水平。快速发展的红利、优胜劣汰的挑战、与生俱来的混乱、同混乱抗衡的规范……这些都是前端从业者无法逃避的现状。有人说，做好业务支撑是活在当下，而做好技术基建是活好未来。当业务量到达一定量级时，成为“规范制定者”，成为“思考者”，像“架构师”一样思考问题，才能最终成为“优胜者”。
前端知识体系
09-27
### 前端知识体系概览 前端技术随着互联网的发展日新月异，尤其是在2015年至2016年期间，涌现出了许多新技术和框架。本文将围绕这一时期的前端知识体系进行深入探讨，包括但不限于框架与组件、构建生态等方面。 ##...
若依权限控制前端+后端实现思路梳理（PreAuthorize、hasPermi、v-hasPermi）
qq_51260764的博客
08-23 1006
如此我们便可实现这些基本的接口级别的鉴权。整个实现下来，我们发现这必须要求整个系统在构建的伊始就必须要完善的配置结构，否则这个方案是很难流畅的使用的，所以我们在整个项目构建时就应该确定权限配置的基本结构。然后整个方案其实就是简单的字符串匹配，直接for循环都可以，没什么高大上的，但是整个思路还是非常新奇的，而且也可以开拓视野，毕竟自定义指令、@PreAuthorize注解，这些都可以进行一个实战，整体学习下来收获还是很多的。如果文章内容有错误欢迎大家留言指正。
ant-design-vue-2.2.0-beta.5.zip
最新发布
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
ant-design-vue-1.3.16.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
ant-design-vue-1.1.0-beta.0.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
ssm411基于SSM的个人事务管理系统的设计和实现+vue.zip
08-26
使用旧方法对个人事务管理信息进行系统化管理已经不再让人们信赖了，把现在的网络信息技术运用在个人事务管理信息的管理上面可以解决许多信息管理上面的难题，比如处理数据时间很长，数据存在错误不能及时纠正等问题。 这次开发的个人事务管理系统管理员功能有个人中心，用户管理，通讯录管理，财务信息管理，个人事务管理，系统帮助管理。用户可以注册登录，管理自己的通讯录和事务信息。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问，采用的主流的Java语言这种面向对象的语言进行个人事务管理系统程序的开发，在数据库的选择上面，选择功能强大的MySQL数据库进行数据的存放操作。
Web技术基础概览与关键知识点
Web技术基础是一门针对IT专业学生的入门课程，由王勇超老师主讲，课程专注于教授Web设计与开发的基础知识。课程的主要内容包括： 1. **Web基础**：课程首先让学生理解互联网的基本概念，如World Wide Web（万维网）...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值