02 前端基础之CSS - 相关文章

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

02 前端基础之CSS

目录前端基础之CSS css简介基本选择器(重要) 组合选择器(重点) 属性选择器分组与嵌套伪类选择器伪元素选择器选择器的优先级字体相关背景属性边框属性 display属性盒子模型浮动定位是否脱离文档流溢出属性 z-index属性透明度练习前端基础之CSS css简介 # 层叠样式表>>>:就是给HTML标签修改样式语法结构选择器 { 属性名1:属性值1; 属性名2:属性值2 } 注释语法 /*注释内容*/ 引入方式 1.style内部直接编写css…

前端基础：CSS样式选择器

前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2.一条或多条声明:如下所示: selector { property: value; property: value; property: value; property: value; ... } 例如: h1 {color:red; font-size: 14px;} CSS的四种使用方式 1.行…

前端第二篇---前端基础之CSS

前端第二篇---前端基础之CSS 目录一.css介绍二.css语法三.css的几种引入方式四.css选择器五.css属性相关六.盒子模型拓展一.css介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.css语法 2.1css实例每一个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 2.2 CSS注释 /*这是注释…

Web前端基础(4):CSS(一)

1. CSS介绍现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 接下来我们要讲一下为什么要使用CSS. 1.1 HTML的缺陷不能够适应多种设备要求浏览器必须智…

2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02

HTML5 第二天一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{ transform: rotate(0deg); } 二.三角代码演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&…

2021年1月-第02阶段-前端基础-HTML+CSS进阶-VS Code 软件

软件安装 VSCode软件能够安装 VS Code 能够熟练使用 VS Code 软件能够安装 VS Code 最常用的插件 1. VS Code简介 1.1 VS Code 简介 Visual Studio Code (简称 VS Code / VSC) 是微软公司推出的一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补.GIT 等特性,支持插件扩展等等. 推荐理由比 sublime 开源,比 webstorm 更轻智能提示很强大自带 emme…

2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03

HTML5 第三天一. 认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面是正值,上面是负值 z 轴:垂直屏幕 -- 注意:往外边的是正值,往里面的是负值二.3D 转换 3D 转换知识要点 3D 位移:translate3d(x, y, z) 3D 旋转:rotate3d(x, y, z) 透视:perspctive 3D呈现 transfrom-style 3D 移动…

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

HTML5 第一天一.什么是 HTML5 1.HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新版本的 HTML 语言,定义了新的标签.特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 .CSS3 .javascript, 这也是广义上的 HTML5 2.HTML5 拓展了哪些内容语义化标签本地存储兼容特性 2D.3D 动画.过渡 CSS3 特性性能与集成 3.HTM…

2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)

品优购项目(一) 目标: 能会引入ico图标能简单看懂网站优化的三大标签能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍项目名称:品优购项目描述:品优购是一个电商网站,我们要完成首页.列表页.详情页.注册页面的制作 2. 项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需要的技术也是较为复杂的, 复习.总结.提高前面所学布局技术. 3. 设计目标保证浏览器 ie7及以上, 火狐, 360, safari,chrom…

前端基础之css样式（选择器）

一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如二.css的四种引入方式 1.行内式行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: 3.…

前端基础之---css

css 介绍 css 规则有两个主要的部分构成 : 选择器 , 以及一条或多条声明. 现在的互联网前端分为三层 : ● HTML :超文本标签机语言,从语义的角度描述页面结构. ● CSS : 层叠样式表 , 从审美的角度负责页面样式. ● JS : JavaScript . 从交互的角度描述页面行为. CSS : Cascading Style Sheet , 层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果 , 简单的说 : CSS将页面内容和显示样式进行分…

Web前端基础(5):CSS(二)

1. 盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 1.1 盒模型示意图 1.2 盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离,padding的区域是有背景颜色的.并且背景颜色和内容的颜色一样.也就是说background-color这个属性将填充所有的borde…

前端基础系列——CSS规范（文章内容为转载）

原作者信息作者:词晖链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎著作权归原作者所有,转载请联系原作者获得授权. 书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text…

前端基础之css

一.form表单在form表单有两个重要的属性分别是: 关于表单两个属性: name: 作为发送server端的数据的键 value:作为发送server端的数据的值标签嵌套原则: 块级标签可以嵌套块级.内联但是内联只能嵌套内联标签二.css的引入方式: 1.行内式行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p…

前端基础之CSS的引入+HTML标签选择器+CSS操作属性

clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: 一.css 语法形式: 二.使用步骤 1.引入css规则 2.使用css选择器查找html标签: 3.利用css属性设置html标签的样式:…

前端基础之CSS属性

一.背景属性 <style> p { /*背景颜色*/ background-color: red; /*字体颜色*/ color: blue; /*宽度和高度*/ width: 600px; height: 600px; /*背景图片*/ background-image: url('hlw.png'); /*背景重复*/ background-repeat: no-repeat; /* repeat(默认):背景图片平铺排满整个网页 repeat-x:背景图片只在水平方向上平铺 repea…

前端基础之css介绍

CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ 注释是代码之母.--摘自哪吒语录 CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style="color:…

前端基础之CSS快速入门

前一篇写了我们的Html的常用组件,当然那些组件在我们不去写样式的时候都是使用的浏览器的默认样式,可以说是非常之丑到爆炸了,我们肯定是不能让用户去看这样丑到爆炸的样式,所以我们在这里需要使用css样式来美化一下前面的组件,让我们的页面更美观. 在开始css这部分之前,我们需要先在此着重提一下div这个标签,div标签在网页的标准化布局上起到了决定性的因素,我们通过使用div+css,可以完美的让我们的每个组件去到它自己应该去的地方. <div></div> 我们在学习css样式前,…

前端基础之CSS（总结）

css学什么?? 主要学习选择器和属性,选择器是去找到标签的位置,属性是给标签增加需要的样式. CSS选择器 1.基本选择器: 1.标签选择器 2.ID选择器 3.类选择器(class="c1 c2 ...") 2.通用选择器(*) 3.组合选择器 1.后代选择器(空格) 2.儿子选择器(>) 3.毗邻选择器(div+p) 用的时候感觉有点问题 4.弟弟选择器 (~) 4.属性选择器 1.[s9] 2.[s9="hao"] 3.其他不常用的 5.分组和嵌套…

前端基础（CSS）

CSS 语法 .clearfix:after{ content: ""; display: block; clear: both; } 解决 float 块之后的塌陷(后面增加了一个空的,属性是clear:both的块) CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... property: value } 例如: h1 {color:red; font-size:14px;}…

web前端基础——初识CSS

1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣),基本上所有的HTML页面都或多或少的使用了CSS. CSS在页面中存在的三种方式:元素内联.页面嵌入和外部引入(语法:style='key1:value1;key2:value2;') (1)标签内联:在HTML标签中使用 style='属性:属性值;' (2)页面嵌入: <st…

前端基础：CSS属性操作

CSS属性操作 1.文本文本颜色:color,颜色属性被用来设置文字的颜色,颜色是通过CSS经常指定的,其格式有: 1.十六进制:#FF0000: 2.RGB值:RGB(255,0,0): 3.颜色名称:red: 水平对其方式:text-align属性规定元素中的文本的水平对齐方式: 1.left:文本排列到左边:默认值:由浏览器决定: 2.right:文本排列到右边: 3.center:文本排列到中间: 4.justify:文本两端对齐: 文本其他操作: text-align:center…

前端基础 & 初识CSS

CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.l 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ 没有注释的话会,代码的可读性会非常差,后期做改动的话会非常麻烦. CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style=…

前端基础之 CSS

浏览目录 CSS介绍 CSS语法 CSS的几种引入方式 CSS选择器 CSS属性相关一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.CSS语法每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 注释格式: /*这是注释*/ 三.CSS的几种引入方式 1.行内样式行内样式是在标记的style属性中设定CSS样式.不…

前端基础之css

css 介绍 css(层叠样式表)定义如何显示html 元素当浏览器读到一个样式表, 他就会按照这个表对文档进行格式化(渲染) css语法 css实例 css 注释注释是代码之母 /* 这是注释*/ css的几种引入方式行内样式行内式是标记的的style属性中设定的css样式.不推荐大规模使用. <p style ="color :red"> 内部样式嵌入式是将css样式集中卸载网页的<head></head>标签对的<style&…

重温前端基础之-css浮动与清除浮动

文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 在 CSS 中,我们通过 float 属性实现元素的浮动浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存…

Web前端基础(6):CSS(三)

1. 定位定位有三种:相对定位.绝对定位.固定定位 1.1 相对定位现象和使用: 1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别. 2.设置相对定位之后,我们才可以使用四个方向的属性: top.bottom.left.right. 特性:1.不脱标 2.形影分离 3.老家留坑所以说相对定位在页面中没有什么太大的作用.影响我们页面的布局.我们不要使用相对定位来做压盖效果用途: 1.微调元素位置 2.做绝对定位的参考(父相子绝)绝对定位会说到此内容. 1.2 绝对定位…

第 2 章前端基础之CSS

一.CSS语法 CSS规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... property: value } ''' 例如: h1 {color:red; font-size:14px;} 二.CSS的四种引入方式 1.行内式行内式是在标记的style属性中设定CSS样式,这种方式没有体现CSS的优势,不推荐使用. <p style="background-color: rebe…

前端基础之CSS(浮动-解决溢出-实现个人头像框)

目录一:浮动float 1.什么是浮动? 2.浮动的作用 3.浮动有两个特点 4.float格式二:代码实现左右浮动边框三:浮动造成父标签塌陷问题(清除浮动) 1.浮动会造成父标签的影响三:清除浮动的副作用(父标签塌陷问题) 1.自己加一个div设置高度 2.利用clear属性 3.通用的解决浮动带来的影响方法四:overflow溢出属性 1.当代码出现溢出时 2.解决代码溢出五:代码溢出的应用场景 1.实现个人头像 2.解决设置头像照片溢出问题 3.圆形头像示例一:浮动float…

前端基础之CSS（1）

1.css3的新特性有哪些 (1)CSS3选择器(基本.属性.伪类具体见下) (2)CSS3边框与圆角圆角border-radius 属性:border-top-left-radius 左上角 border-top-right-radius 右上角 border-bottom-right-radius 右下角 border-bottom-left-radius 左下角 (3)CSS3背景与渐变可以设置多个背景图片,图片大小,位置线性渐变 background: linear-gradien…