项目经理:你这版排的是什么东西,能看吗你觉得?能不能干?不能在公司呆就走!公司不需要你这样的“人才”。在疫情大环境下,发生在我学生身上真实的事情,项目经理系列的讽刺,让我的学生低头沉默不语,后来回来给我吐槽这件事情,我始终不敢相信二十出头的年轻人竟在我面前泣不成声!
本来这篇文章是要更前端核心框架的,但我学生的事情,让我痛定思痛,再给大家来一篇这样的文章,希望大家能够认真的笔记并消化。
前端就是思维+转变的一个东西,它富有灵魂,当你沉醉其中,里面的诸多奥秘就会让你流连忘返,深沉品味。
前端的技术一直更新特别快,特别是框架这块。
但是归根结底,那都是后话,因为我们要想在企业站住脚步,扎根就一定要稳,跟做人是一个道理。起步可以慢,但是我们掌握了一定的技巧后,我们可以融会贯通,做事情事半功倍!
今天给大家带来的第二节课:核心语法阶段——html/css(CSS基本样式和元素选择器)
大家想学习好前端,CSS就是你的脸面,就是你的气质。你的样式结构让人看上去赏心悦目,你就要像对待自己的穿着一样对待你的代码。
要不厌其烦,要耐心审视。扎实好基础,最近看书,感觉受益匪浅,专门记录自己的学习补充过程。
先扔一张图出来:
1:什么是css
1. 层叠样式表(Cascading Style Sheets,简称css)是一种用来为html文档添加样式
2. 字体,间距,位置,颜色,角度等显示效果的计算机语言.
3. html是内容的展示,css是内容的装饰
2:css的引用方式
1.行内样式:在开始标签的内部可以设置一个叫做style的属性,属性的双引号内存该元素代码css样式.
写法:<div style="存放该元素的css样式代码"></div>
2.内部样式:在head标签中间新建一个style标签,该标签内部存放的就是网页文件中的css代码
写法:
<head>
<style>层叠样式表:css,专门修饰网页显示效果
</style>
<head>
3.外部样式
写法:<link rel='stylesheet' href='这里写css文件的地址'>(引用网页外部css文件)
3:CSS代码的基本格式
1.元素/标签命名的基本格式
1.1<div class="box"></div> class命名:谁都可以取,可以取任意次
1.2<div id="boss"></div> id命名:只能唯一的,一旦使用不可二用.
2.css样式设置的基本格式
2.1选择器:选择元素的器具或是工具
2.2 class命名的元素使用:.box(.+元素名称)
2.3 ID命名的元素使用: #boss(#+元素名称)
2.4:或是直接写上标签的名称: div,p,h1等可以找到元素
4:css基本样式
1.常用样式类别
尺寸样式:宽:width 高:height
位置样式:水平位置: margin-left
margin-right
垂直位置:margin-top
margin-bottom
装饰样式:元素颜色:background-color
文字样式:文字大小:font-size
文字字体:font-family
文字颜色:color
css3样式
5:常用复合选择器的使用
1.交集选择器:交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格如h3.box.
2.并集选择器:(css选择器分组)是各个选择器通过逗号连接而成的.
任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。
3.后代元素选择器是一个空格,(空格前后各有一个人选择器)
作用是:找到空格前的选择器所选中的元素的后代元素中符合空格后选择器的元素
4.子代元素选择器
子代元素选择器是一个大于号,大于号前后各有一个选择器
作用是:找到大于号的选择器所选中的元素子元素中大于号后选择器要求的元素
5.相邻元素选择器
相邻元素选择器是一个+号,作用是:找到加号前的选择器所选中的元素紧跟其后一个符号+号后选择器选择中的元素
6.兄弟元素选择器
兄弟元素选择器是一个~号,作用是:找到~号前的选择器所选中的元素紧跟其后所有符合~号选择器选中的元素
6:样式优先级
!important 最重
行内样式,权重 1000
ID选择器,单个权重100
类名选择器,属性选择器,伪类选择器 单个权重10
标签选择器,伪元素选择器 单个权重1
通配符选择器 关系选择器(+,>,~,"") 否定伪类 权重0
前端学习要想精就得静,静下心来,看上去知识点很多很杂,但是你把文章
点赞或者收藏起来,
每次写代码的时候对应着写,代码有时候就像一杯茶,得品,你自然而然意境就和别人拉开差距。