CSS
文章平均质量分 71
hello_xujj
这个作者很懒,什么都没留下…
展开
-
css样式表的创建
样式表创建创建样式表的目的是为了修改标签的样式。css(cascading style sheets)层叠样式表,主要是为了修改网页信息的显示样式。css语法:选择器名称{ 属性1:属性值1; 属性2:属性值2 .........}样式表的创建分为行内样式、内部样式和外部样式。1、行内样式行内样式表:在标签上添加style属性,只作用于当前标签,不常用,一般用在出错调试用。语法:<标签名称 style=“属性:属性值;”></标签名称>&原创 2021-09-20 12:08:25 · 1578 阅读 · 0 评论 -
背景颜色基础知识
背景颜色基础知识background-color属性background-color属性表示背景颜色,背景颜色可以用十六进制、rgb()、rgba()表示法表示,padding区域也是有背景颜色的。示例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed原创 2021-06-25 17:25:36 · 703 阅读 · 0 评论 -
css圆角
圆角border-radius属性border-radius属性的值通常为px单位,表示圆角的半径。示例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid原创 2021-05-25 18:59:05 · 3784 阅读 · 0 评论 -
四个方向的边框
四个方向的边框四个方向的边框属性属性意义border-top上边框border-right右边框border-bottom下边框border-left左边框四个方向边框的三要素小属性四个方向边框也可以写成三要素小属性,以右边框为例示例如下:属性意义border-right-width右边框宽度border-right-style右边框线型border-right-color右边框颜色示例代码如下:<原创 2021-05-20 15:10:16 · 740 阅读 · 0 评论 -
边框三要素
边框三要素border属性border属性需要三个要素:线宽度、线型、线颜色,示例如下:border: 1px solid red;示例代码分别表示线宽度为1px、线型为实线、线颜色为红色。线型线型值意义solid实线dashed虚线dotted点状线示例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2021-05-18 15:14:41 · 1313 阅读 · 0 评论 -
定位
定位相对定位相对定位:盒子可以相对自己原来的位置进行位置调整,称为相对定位。left 向右移动;right向左移动;top 向下移动;bottom 向上移动,值可以为负数,即往规定方向相反移动。相对定位的性质相对定位的元素,会在“老家留坑”,本质上仍然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成“影子”,不会对页面其他元素产生任何影响。示例代码如下:<!DOCTYPE html><html lang="en"><head> <原创 2021-05-14 15:27:27 · 91 阅读 · 0 评论 -
清除浮动
清除浮动清除浮动:浮动一定要封闭到一个盒子中,否则就会对页面后续元素产生影响.清除浮动方法1让内部有浮动的父盒子形成BFC,它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性。示例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid原创 2021-05-12 17:16:10 · 53 阅读 · 0 评论 -
使用浮动实现网页布局
使用浮动实现网页布局注意事项1、垂直显示的盒子,不要设置浮动,只有并排显示的盒子才要设置浮动!2、“大盒子带着小盒子跑”,一个大盒子中,又是一个小天地,内部可以继续使用浮动 。3、多用div标签。BFC规范和浏览器差异BFC规范BFC(Box Formatting Context,块级格式化上下文)是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。一个盒子不设置height,当内容子元素都浮动时,无法撑起自身,这个盒子没有形成BFC。如何创建BFC方法①:f原创 2021-05-10 16:35:20 · 1739 阅读 · 0 评论 -
浮动
浮动浮动的概念浮动在文档布局中是一个非常重要的概念,它描述一个元素浮动至某一侧并停下的表现方式。CSS 允许浮动任何元素。浮动元素会脱离网页文档,与其他元素发生重叠,但不会与文字内容发生重叠。浮动的使用浮动的最本质功能是用来实现并排,示例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten原创 2021-05-08 10:39:45 · 72 阅读 · 0 评论 -
行内元素和块级元素
display属性display在英文中为展示的意思,在css中分为行内元素与块级元素。下表为各自的特点:display属性是否能并排显示是否能设置宽高当不设置width属性时举例块级元素否是width自动撑满div、section、header、 h系列、li、ul等行内元素是否width自动收缩a、span、em、b、u、i 等来一段示例代码:<!DOCTYPE html><html lang="en"><he原创 2021-05-06 15:32:18 · 321 阅读 · 0 评论 -
盒模型
盒模型认识盒模型所有HTML标签都可以看成矩形盒子,由width、height、padding、border构成,称为“盒模型”。示例图如下:因此我们可以知道width、height不是盒子总宽高。盒子的总宽度 = width + 左右padding + 左右border盒子的总高度 = height + 上下padding + 上下borderwidth和height属性详解width属性width属性表示盒子内容的宽度,单位通常是px,移动端开发也会涉及百分数、rem等单位。当块级元素原创 2021-05-03 15:20:00 · 77 阅读 · 0 评论 -
字体属性
字体属性详解font-family属性font-family属性用于设置字体,示例如下:font-family: "宋体";字体可以是列表形式,一般英语字体放到前面,后面的字体是前面的字体的“后备”字体。字体名称中有空格或者为中文,必须用引号包裹。示例如下:font-family: serif, "Times New Roman", "微软雅黑";中文字体也可以称呼它们的英语名字,示例如下:中文字体名等价的英语字体名font-family: “微软雅黑”font-fami原创 2021-05-02 16:38:10 · 691 阅读 · 0 评论 -
段落属性、继承性
段落属性、继承性段落和行相关属性text-indent属性text-indent属性定义首行文本内容之前的缩进量,示例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont原创 2021-04-30 21:23:44 · 205 阅读 · 1 评论 -
常用的文本样式属性
常用的文本样式属性color属性color 属性可设置文本内容的前景色。color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法。英语单词表示法仅仅用于学习时临时设置一下颜色,实际开发时基本不用这样的形式,因为追求精确。示例如下:color: red;十六进制表示法十六进制表示法是所有设计软件中都通用的颜色表示法,设计师给我们的设计图上面标注的颜色,通常为十六进制表示。示例如下:color: #ff3366;上面的ff就是十进制的255,每种颜色分量都是0~255的数原创 2021-04-29 17:24:40 · 564 阅读 · 0 评论 -
伪元素与选择器权重
伪元素CSS3新增了“伪元素”特性,顾名思义,表示虚拟动态创建的元素,用双冒号表示。::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素,必须设置 content 属性表示其中的内容。::after 创建一个伪元素,其将成为匹配选中的元素的最后一个子元素,必须设置 content 属性表示其中的内容。::selection CSS伪元素应用于文档中被用户高亮的部分(使用鼠标圈选的部分)。::first-letter会选中某元素中(必须是块级元素)第一行的第一个字母。::firs原创 2021-04-28 20:25:32 · 318 阅读 · 0 评论 -
css3新增选择器
css3新增选择器元素关系选择器元素关系选择器一共有三种,分别是子选择器、相邻兄弟选择器和通用兄弟选择器。名称举例意义子选择器div>pdiv的子标签p相邻兄弟选择器img+p图片后面紧跟着的段落将被选中通用兄弟选择器p~spanp元素之后的所有同层级span元素子选择器当使用 > 符号分隔两个元素时,它只会匹配那些作为第一个元素的直接后代元素,即两个标签为父子关系。他跟后代选择器的区别是后代选择器不一定限制是子元素。示例代码如下:&原创 2021-04-27 20:09:23 · 185 阅读 · 0 评论 -
标签选择器和id选择器
标签选择器和id选择器标签选择器标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签。标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅。看下面一段示例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=原创 2021-04-26 15:33:47 · 4767 阅读 · 0 评论 -
css基础入门
CSS基础知识前端三层前端学习中重要的三个语言HTML、CSS、JavaScript,各自的功能如下表所示:语言功能结构层HTML搭建结构、放置部件、描述语义样式层CSS美化页面、实现布局行为层JavaScript实现交互效果、数据收发、表单验证等CSS3简介CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言。CSS3是CSS的最新版本,增加了大量的样式、动画、3D特效和移动端特性等。CSS使样式原创 2021-04-25 16:44:11 · 46 阅读 · 0 评论