《入门html+css初识CSS-WEB前端大作战》由会员分享，可在线阅读，更多相关《入门html+css初识CSS-WEB前端大作战（9页珍藏版）》请在金锄头文库上搜索。
1、小花带你一周入门html+css初识CSS丨【WEB前端大作战】 【摘要】 相信大家应该都听过说：Java、A、Php、Python、C、C+、C#、网站前端，网页设计等这些技术，但是可能你不知道，这些技术都需要掌握两个基础的技术html+css。接下来我将带领大家一起，在一周的时间内，轻松搞定这两个技术。今天我们来初步认识一下CSS下面我们先看一下CSS我们主要学点什么CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦这时我们就已经能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！关于CSS的各种属性，我们还是可以参考学习HTML那样。
2、可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度border-right-with”，”右边框颜色border-right-color”等等等，诸如此类完全就是我们需要什么，只要凭着需求去寻找。follow me1.什么是cssCSS，层叠样式表（Cascading Style Sheets），是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号
3、样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。2.css入门书写方式书写位置：head标签里面，title标签下面书写环境：所有样式需要使用style包裹html页面只认识标签，css不属于标签，想要让浏览器/html识别，必须准备一个环境,一对style标签，并且要将style标签添加一个属性：type=“text/css”（意为纯文本的css格式）书写规则：首先要确定选中的对象（控制的对象）到底是谁，后面紧跟css键值对（k:v;），所有的css键
4、值对必须要放到一对英文状态下的大括号里面选中的对象加大括号里面的css属性称为css样式条注意： 属性：属性值； 的写法称为css键值对3.css书写进阶书写方式分类：内嵌式：上面介绍的css书写方式就是行内式内嵌式结构与样式实现半分离行内式：在标签内部增加style属性，属性值是css键值对行内式没有实现结构与样式分离，不推荐前台工作人员使用外链式：分为link引入（推荐）和 import引入（了解）配合link标签的三个属性：格式：type=“text/css” 引入的文件格式是样式表关系：rel=“stylesheet” 用来说明引入的文件是当前html的样式表（必不可少）地址：href
5、=“URL” css文件的路径（必不可少）import url(css路径); 最后这个分号不能省略tips:外链式实现了真正的结构与样式分离现在绝大部分的网站都采用link方式，原因在于import先加载HTML，后加载CSSlink先加载CSS，后加载HTML4.文字三属性颜色 color字号 font-size字体 font-family文字加粗 font-weight：bold（100,200,300） bold就等于700内容对齐属性 text-align：left|center|righttips：网页中常用字体英文写法微软雅黑 Microsoft YaHei宋体 SimSun黑体
6、 SimHei5.实体化属性实体化三属性虽然简单，但是真的很重要，兼容性好不好，css学的好不好，全都体现在实体化三属性是否运用得当实体化一个元素：是指让一个元素能够在网页中具有意义，能够看到这个元素的存在。如何实体化元素：给元素设置以下三个属性：宽度 width高度 height背景色 backgroundtips： 如果没有这三个属性，我们预览网页可能什么都看不到 在css2.0阶段，所有标签都是矩形，如果出现了非矩形的标签需要切图制作 以后我们制作网页会经常遇到千奇百怪的问题需要我们去解决，解决过程中多多使用这三个属性去调试。6.新标签div+spandiv：大容器、大盒子。通常用作网页
7、的布局和排版，结构的搭建；内部可以存放任何标签、任何内容。span：小容器、小盒子、通常存放特殊效果的文字或小图标、小图片等等。7.显示模式显示模式：就是盒子在页面中的显示方式所有html标签按显示模式划分为两类：块级标签和行内标签块级标签：最具代表性的标签就是div。特点：独占一行，可以设置宽高并能生效行内标签：最具代表性的标签就是span。特点：一行可以共存多个，可以设置宽高但是不生效，自身尺寸受内容的控制。分为两种：块级元素和行内元素块级元素：独占一行，可以设置width和height并且生效如果不设置width，则默认宽度按浏览器宽度显示如果不设置height，则默认高度和内容一样行内
8、：可以和其他行内元素在一行显示，宽高由内容撑起显示模式之间的转换： 属性：display；转化为块 block（独占一行，具有宽高）；转换为行内 inline（可以和其他元素在同一行显示）；转化为行内块inline-block（可以和其他元素在同一行显示，并且具有宽高）； 隐藏：display：none；不占位隐藏visibility：hidden；占位隐藏tips: 这些都仅仅让元素暂时隐藏，并没有把元素从html结构中删除。 行内块（由css制造出来的显示模式） inline-block；特点：既有块级标签的优点（成功设置宽高）又有行内标签的优点（一行可以共存多个） 行内元素也称为“内联元
9、素 ”行内元素有 a , span , b , u , i , strong , em，img , input注：其中img和input是行内块8.选择器选择器 是指我们要控制的元素或者对象标签选择器（元素选择器）：就是以标签名称命名的选择器，如：div，h1，li,p,ol,dl等li background:#ccc;pfont-size:14px;color:#555;id选择器：#id值css键值对#bg_color_green background:green;#bg_color_red background:red;直接在标签身上添加属性：id=“id选择器的名称”华为云市场华为云学
10、院华为云论坛tips： id选择器分定义和应用两个步骤，但不分先后顺序 但凡是id选择器，声明的时候都要以#号开头，紧跟id选择器的名称（自定义），规则为：不能出现中文；不能使用特殊符号；不能以数字开头，可以以数字结尾，不能和关键字一样（关键字 ： html的标签名字和标签的属性）id=div id=head id=ul id=name id=title id=class 是不合理的 在一个页面中，同一个id名称只能出现1次，通常为开发人员常用的选择器类选择器:.类选择器名称css键值对要求以点开头，后面紧跟选择器名称，名称自定义，规则同id选择器在标签里面添加class属性：class=“类
11、选择器”.box background:pink;这是div这是ptips： 类选择器类选择器可以在页面中多次使用，是前台人员最常用的选择器 我们在实际工作中，如果类选择器名称由多个单词构成 ，我们通常会使用中划线或者下划线分割。id和class的区别：注意上一点id必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器，那么即使两个DOM节点样式完全相同，那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护！极大的增加了维护的成本;简单来说id就是用来标识那些单独不重复的样式，而class是可以重复使用的。通配符选择器 *（不建议使用）选中所有标签（包括废标
12、签）由于通配符可以选中所有标签，针对性最低，权重最低9.选择器权重id选择器 类选择器 标签选择器 通配符选择器谁针对性高谁优先生效!important 提权 可以将权重提高到最高tips：!important书写在键值对分号之前所有被!important标记的样式，即使它后来被重写，浏览器也只会采用被标记的那条。如下 background:#eee 生效 liwidth:200px;height:50px;background:#eee ! important; liwidth:200px;height:50px;background:#f00; !important 用来强制使一个样式避免在之后的编码中被修改，遗憾的是IE不支持tips学习小技巧:学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。既然学习这么痛苦，为什么不快乐一点学呢？anyway希望大家可以成为一个优秀的前端！【WEB前端大作战】火热进行中：/blogs/255890 附件： css属性.xlsx 13.21KB 下载次数：0次-全文完-
