前端基础☞CSS

前端基础-CSS属性操作

前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red p { color: rebeccapurple; } 水平对齐方式 text-align 属性规定元素中的文本的水平对齐方式. left 把文本排列到左边.默认值:由浏览器决定. right 把文本排列到右边. center 把文本…

前端基础-CSS的各种选择器的特点以及CSS的三大特性

一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. 基本选择器 1.id选择器 #1.作用: 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 #2.格式 id名称 { 属性:值; } #3.注意点: 1.在企业开发中如果仅仅只是为了设置样式,通常不会使用id,在前端开发中id通常是留给js使用的 2.每个标签都可以设置唯一一个…

前端基础-CSS的属性相关设置

一字体属性二文本属性三背景属性四盒子模型五盒子模型各部分详解一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值描述 normal 默认值,标准粗细 bord 粗体 * border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold * inherit 继承父元素字体的粗细值 2.font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜 3.fo…

前端基础-CSS如何布局以及文档流

一. 网页布局方式二. 标准流三. 浮动流四. 定位流一. 网页布局方式 1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 2.网页布局/排版的三种方式 2.1.标准流 2.2.浮动流 2.3.定位流二. 标准流标准流的排版方式,又称为:文档流/普通流,所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列. 1…

2020年12月-第02阶段-前端基础-CSS基础选择器

CSS选择器(重点) 理解能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如一只眼睛的一组,剩下的一组选择器的作用找到特定的HTML页面元素 CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来必须记住的 css 就是分两件事, 选对人, 做对事. h3 { color: red; } 这段代码就是2件事, 把 h3选出来, 然后把它变成了红色. 以后我们都这么干. 选择器…

前端基础-- CSS

CSS知识 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).Css之车更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文字的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. CSS语法每个CSS样式右两部分组成:选择器和声明.声明又包括属性和属性值. 提示:声明使用花括号包围, 多个属性用分好分隔,属性和值之间使用冒号分隔.…

Web前端基础——CSS

一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果,简而言之,css就是要对网页的显示效果实现与word 一样的排版控制. DIV+CSS 标准的叫法 xhtml+css //XHTML 指扩展超文本标签语言(EXtensible HyperText Markup Language). CSS的好处 1.提高网页的浏览速度,至少50% 的文件尺寸: 2.缩短改版…

前端基础-css（1）

一.css的引入方式现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能.css的最新版本是css3. 1.css优点: (1) 使数据和显示分开: (2) 降低网络流量:…

003.前端开发知识，前端基础CSS（2020-01-07）

一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTML为基础,提供了丰富的功能,如字体.颜色.背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式. 二.引入CSS样式表 1.行内式(内联样式) <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标…

2020年12月-第02阶段-前端基础-CSS Day02

CSS Day02 复合选择器后代选择器并集选择器 1. CSS复合选择器理解理解css复合选择器分别的应用场景为什么要学习css复合选择器 CSS选择器分为基础选择器和复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签. 目的是为了可以选择更准确更精细的目标元素标签. 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的 1.1 后代选择器(重点) 概念: 后代选择器又称为包含选择器作用: 用来选择元素或元素组的子孙后代其写法就是把外层标签写在前…

前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>hello yuan</p…

前端基础css

CSS主要学习的是选择器和样式属性. 导入css的方式:行内样式,内部样式,外部样式(推荐使用) 行内样式:在标记的style属性中设定CSS样式 <p style="color: green">Hello world.</p> 内部样式:是将CSS样式卸载网页的<head></head>标签下<style></style>标签中 <head> <meta charset="UTF-8&…

前端基础--css基本语法,选择器

一.css概述 CSS(Cascading Style Sheet)层叠样式表,定义如何显示HTML元素,给HTML设置样式,让它更加美观.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS创建于1996年,在1997年W3C颁布HTML4.0与XHTML1.0时同时公布了CSS1标准.1998年推出了CSS2标准,目前仍不断发展和完善中二.css语法 1.实例 2.注释 /* 注释内容 */ 三.css的引入方式优先级: 内联样式)Inline style >…

前端基础-CSS是什么？

阅读目录一. 什么是CSS 二. 为何要用CSS 三. 如何使用CSS 一. 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是HTML标签的显示效果,比如换行.宽高.颜色等等层叠属于CSS的三大特性之一,我们将在后续内容中介绍表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里二. 为何要用CSS 在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性,如下 <!…

前端基础-css（3）

一.文本属性和字体属性(常用的) 1.文本属性 text-align:left|right|center|justify(两端对齐,只适用于英文); /*对齐方式*/ color:色值; /*文本颜色*/ text-indent:2em; /*首行缩进,建议单位用em*/ text-decoration:none|underline|overline|line-through|inherit; line-height:高度值; 2.字体属性 font-weight:normal|bol…

前端基础-css（2）

一.标准文档流宏观的将,我们的web页面和ps等设计软件有本质的区别,web网页的制作,是个“流”,从上而下,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画. 标准文档流下,有一些现象,比如空白折叠现象.高矮不齐底边对齐现象等. 标准文档流等级森严,标签分为两种等级:行内元素和块级元素. 1.行内元素和块级元素的区别: 行内元素: a.与其他行内元素并排: b.不能设置宽.高,默认的宽度,就是文字的宽度: 块级元素: a.独占一行,不能与其他任何元素并列: b.能接受宽.高.如果不设…

前端基础——CSS盒子模型

如今很多网页都是由很多个"盒子"拼接.嵌套而成,所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解. 为了更好的说明,先举个通俗的样例:在一个仓库中放了10个纸箱,每一个纸箱之间有一定距离,每一个纸箱内放的是一台电脑而且纸箱和电脑之间都有一层泡沫来隔绝防震(这里如果纸箱和电脑都是正方体).以这个样例为背景接着说盒子模型. 事实上一张图片就能够把CSS盒子模型形象地表述出来.网上一搜一大堆: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ…

css的四种引入方式 1.行内式行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="background-color: rebeccapurple">hello yuan</p> 2.嵌入式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <meta…

006.前端开发知识，前端基础CSS（2020-01-21）

来源:第五天 01盒子水平居中一.盒子中文字控制: 1.text-align: center; /*可以让盒子内容(文字行内元素行内块元素)居中对齐*/ 二.让盒子水平居中对齐: 方法1.margin: 0 auto; /*通俗写法 0 auto 上下是 0 左右是auto 水平居中对齐 */ 方法2. margin-left: auto; margin-right: auto; /*自动充满*/ 方法3.margin: auto; /* 上下左右都是auto*/ 来源:第五天…

005.前端开发知识，前端基础CSS（2020-01-14）

一.CSS权重权重是可以叠加的,事例如下: div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 a:hover -----—> 0,0,1,1 .nav a ------> 0,0,1,1 #nav p -----> 0,1,0,1 数位之间没有进制: 继承的权重是 0…

004.前端开发知识，前端基础CSS（2020-01-09）

一.CSS字体样式属性 1.font-size:字号大小 2.font-family:字体 font-family属性用于设置字体.网页中常用的字体有宋体.微软雅黑.黑体等. * { /*font-family: "微软雅黑";*/ font-family: "microsoft yahei", Arial; /*font-family: Arial;*/ } p { font-size: 16px; /*千万别忘了带px 单位*/ line-height: 28p…

2020年12月-第02阶段-前端基础-CSS Day07

CSS Day07 CSS高级技巧理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法应用能写出最常见的鼠标样式能使用精灵图技术能用滑动门做导航栏案例 1. 元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 1.1 display 显示(重点) display 设置或检索对象是否及如何显示. display: none 隐藏对象 display:block…

2020年12月-第02阶段-前端基础-CSS Day05

CSS Day05 1. 学成在线页面制作理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为html页面学成在线的目的就是为了串联前面的所有知识. 取义学有所成,为师之期望,君等成才者也,故曰学成网是也~~ 1.1 前期准备素材学成在线PSD源文件开发工具 = PS(切图) + sublime(代码) + chrome(测试) 1.2 前期准备工作工欲善其事,必先利其器. 先把我们…

2020年12月-第02阶段-前端基础-CSS Day04

1. 浮动(float) 记忆能够说出 CSS 的布局的三种机制理解能够说出普通流在布局中的特点能够说出我们为什么用浮动能够说出我们为什么要清除浮动应用能够利用浮动完成导航栏案例能够清除浮动能够使用PS切图工具 1.1 CSS 布局的三种机制网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了** 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位**,其中: 1.普通流(标准流) 块级元素会独占一行,从上向下顺序排列: 常用元素:div.hr.p.…

2020年12月-第02阶段-前端基础-CSS Day03

CSS Day03 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位主题思路: 理解: 1.能说出盒子模型有那四部分组成 2.能说出内边距的作用以及对盒子的影响 3.能说出padding设置不同数值个数分别代表的意思 4.能说出块级盒子居中对齐需要的2个条件 5.能说出外边距合并的解决方法应用: 1.能利用边框复合写法给元素添加边框 2.能计算盒子的实际大小 3.能利用盒子模型布局模块案例 1.看透网页布局的本质网页布局中,我们是如何把里面的文字,图片,按…

2020年12月-第02阶段-前端基础-CSS字体样式

CSS字体样式属性调试工具应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字号 p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位. 相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少. 注意: 我们文字大小以后,基本就用px了,其他单位很少使用谷歌浏览器默认的文字大小为16px 但是不同浏览器可能默认显示的字号…

2020年12月-第02阶段-前端基础-CSS初识

CSS层叠样式表理解 css的目的作用 css的三种引入方式 1.HTML的局限性说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用<p> 表明这是一个段落,用`<img>` 表明这儿有一个图片, 用`<a>` 表示此处有链接. 很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点: 丑. 这个是一个外国比较早的购物网站有些人就忍受不了了,你就不能把自己打扮得漂亮一点吗? HTML说,我试试.…

前端基础css（三）

HTML:用于显示页面的内容 CSS:用于以什么样的形式(样式)去显示一. 选择器 [1] 标签/元素选择器 (整个页面的所有的相同的标签都显示统一的样式) h1{ font-size: 20px; 字体大小 color: red; 字体颜色 font-family: "楷体"; 字体样式 } [2] 类选择器 (统一的样子中,N多特殊的样式) <style type="text/css"> .blue{ color: blue; } </sty…

2020年12月-第02阶段-前端基础-CSS Day06

CSS Day06 定位(position) 理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局 1. CSS 布局的三种机制网页布局的核心 -- 就是用 CSS 来摆放盒子位置. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流.浮动和定位,其中: 1.普通流(标准流) 2.浮动让盒子从普通流中浮起来 -- 让多个盒子(div)水平排列成一行. 3.定位将盒子定在某一个位置自由的漂浮在其他…

【前端基础☞CSS】的更多相关文章

前端基础——css