![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS基础
好多可乐
这个作者很懒,什么都没留下…
展开
-
二十六,固定定位
固定定位:现对于浏览器窗口进行定位 ( 固定元素不会随,页面翻滚而滚动 )代码–>position:fixed;<html><head> <meta charset="UTF-8"> <title>Document</title> <style> .test1{ width: 5%; height: 3%; position: fixed; l原创 2020-12-16 14:59:31 · 73 阅读 · 0 评论 -
二十五,z-index的使用
z-index用于改变层叠顺序,数字大的先显示.代码–>z-index: 1(数字可以任意,但为了以后修改方便,最好将前期的基础index值,设置的较大些,以便后期插入新元素。(例如10、或100的整倍数));<html><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <styl原创 2020-12-16 14:58:52 · 139 阅读 · 0 评论 -
二十四,相对定位与浮动
float和relative同时使用时,会同时具有各自的特点:float——浮动,且不会被忽略relative——四周边距原创 2020-12-16 14:58:16 · 100 阅读 · 0 评论 -
二十三,绝对定位与浮动
绝对定位(absolute)于浮动(float)的对比:相同点:都会产生浮动,都会破坏文档流不同点:float定位后,文档流其他文档会被绕开,不会被遮挡。绝对定位会覆盖其他内容截图是float的演示效果(如果是相对定位,就直接部分文字被覆盖了)<html><head> <meta charset="UTF-8"> <title>Document</title> <style> .main{原创 2020-12-16 14:57:41 · 214 阅读 · 0 评论 -
二十二,相对与绝对定位
一,在不设置定位(也就是默认定位 static 的情况下,对块级元素设置top/left等属性,无效。二,使用绝对定位还是相对定位的一个判断依据就是文档流是否需要被破坏:绝对定位会破坏文档流——产生浮动效果如底下代码,本来是想实现3个方块竖排紧贴在一起,实际效果:第二个覆盖第一个,第三个覆盖第二个,最终显示的只是第三个方块<html><head> <meta charset="UTF-8"> <title>Document</ti原创 2020-12-16 14:56:40 · 167 阅读 · 0 评论 -
二十一,绝对定位
绝对定位:相对于已定位的最近的祖先元素,如果没有已定位的最近的祖先元素,那么它的位置就相对于最初的包含块(如body)。类似float,产生浮动效果主要代码:position: absolute(效果如图:设置了top,left和相对定位后)使用绝对定位还是相对定位的一个判断依据就是文档流是否需要被破坏:绝对定位会破坏文档流——产生浮动效果与相对定位的区别:绝对定位的参照物是最近的祖先元素,如没有已定位的最近的祖先元素,参照物是body。相对定位的参照物是元素本身1、绝对定位元素相对的元素是原创 2020-12-16 14:55:05 · 118 阅读 · 0 评论 -
二十,CSS定位概述与相对定位
CSS定位:position:relative(相对)/absolute(绝对)/ static(无定位)/ fixed(固定)文档流:从上往下,从左到右相对定位:relative:相对于自己以前所在的位置进行定位,效果如下图(本来在左上角,设置相对定位和top,left属性后,红色方块进行了移动)如果设置了相对定位以后,不输入具体的top/left值,这样相对定位可以做为一种容器父元素存在。<html><head> <style type="text/c原创 2020-12-15 16:27:48 · 87 阅读 · 0 评论 -
十九,浮动:float属性
float属性设置:1,left–元素向左浮动2,right–元素向右浮动3,none–默认值。元素不浮动。总结:给谁添加了float,就将谁脱标,后面的内容会顶上来显示。如果顶上去以后,脱标的内容没有改变位置,就会出现后者被前者(拖标内容)覆盖的情况。如果没有改变位置,就出现该在的地方。1,float的崩溃当父元素没有设置高度的情况下,将子元素设置为浮动(float)父一级的块级元素高度发生破坏(又称为破坏,崩塌)div–>在没有设置高度和宽度的情况下:高度为:div内内容的原创 2020-12-15 16:23:33 · 937 阅读 · 0 评论 -
十八,定位机制
定位机制:(主要针对块级元素)有2种:1,(标准)文档流(从上到下依次排列,中间没有改变任何布局和位置,如截图)2,脱标流:(脱离标准文档流)有两种,分别是float,position:absolute),称为浮动,也称为position的实现效果(让块级元素实现从左到右,从上往下)比如让内容4脱离文档流,出现在内容2的后面文档流特点:1,空白折叠现象(把编辑区里的换行的回车显示为空格)2,高矮不齐,底边对齐3,自动换行,一行写满,换行写(不是指浏览器从左到右写满,指的是当前的容器一行写满再原创 2020-12-15 16:17:12 · 188 阅读 · 0 评论 -
十七,行级元素和块级元素
Next:浮动:概念: 可以使对象与对象的排列方式发生改变,以达到页面布局的效果术语:行级元素:行内元素与其他元素都会在一条水平线上排列,都是在同一行相关元素:a标签,label,img,span等块级元素:在默认情况下,会独占一行相关元素:div,h标签,li,table等...原创 2020-12-15 16:16:16 · 60 阅读 · 0 评论 -
十六,元素居中
居中:**1,将文字居中:**让自己容器中的元素居中,常用语文本或者图片等内联元素**2,将对象居中:**让容器中的自己居中,长作用于块元素,且需要配合宽度使用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>margin外边距</title> <style type="text/css">原创 2020-12-15 16:14:56 · 55 阅读 · 0 评论 -
十五,盒子模型
盒子模型:作用: 进行页面布局,用来改变内外间距适用范围: div,body,table等块状显示的属性: width,height,border(边框),margin(外边距,对象与对象之间的距离),padding(内边距,内部内容和边框的距离)border,margin,padding四个属性都可以拆分为4个小类,比如margin,分为margin-top,margin-left,margin-right,margin-bottom,另外2个同理,简写是margin:10px 10px 1原创 2020-12-15 16:14:13 · 78 阅读 · 0 评论 -
十四,div设置
DIV简介:一,什么是div?div是层叠样式表中的定位技术,全称division有时把div称为图层,更多时候称为“块”二,div样式设置div大小,背景设置div溢出效果展示,换行,滚动条显示div边框,轮廓设置盒子模型div{ background-color: yellow; width: 100px; height: 100px; position: absolute; top: 200px; left:原创 2020-12-15 16:13:01 · 3029 阅读 · 0 评论 -
十三,CSS选择器优先级
css选择器优先级:范围越小,优先级越高1,!important(强制优先)2,行内样式(虽然排行高,但是通常情况下不使用行内样式,用的多的是外部样式表)3,id选择器(id)4,类选择器(class)5,标签(p,body之类的)6,通配符(*)7,浏览器默认属性注意: 如果一个样式里面有多个的情况下,后面的覆盖前面的比如<div class ="div1 div2"></div>这个时候如果div1和div2同时设置某个样式,div2设置的样式会覆盖div原创 2020-12-15 16:10:22 · 120 阅读 · 0 评论 -
十二,CSS其他选择器
1,id,* :选择指定元素中被用户选中的内容2,逗号选择器:联合选择器,用逗号隔开1,调用class选择器(允许重复class选择器名称):定义:<p class="imooc">慕课网</p>调用:.imooc{ color: red; }2,调用id选择器(唯一)定义: <p id="name1">慕课网</p>调用: #name1,#name2{ color: blue; }原创 2020-12-15 15:44:50 · 150 阅读 · 0 评论 -
十一,伪元素选择器
一,区别:伪元素选择器:选择部分内容伪类选择器:选择元素整体二,伪元素选择器属性:(部分浏览器可以识别单冒号,比如before,after,但是不建议这么使用)1,::selection:选择指定元素中被用户选中的内容2,::before:可以在内容之前插入新内容3,::after:可以在内容之后插入新内容4,::first-line:选择指定选择器的首行5,::first-letter:选择文本的第一个字符总结:1,无论做什么样式设计,除了语法,也要了解效果2,伪类和伪元素的概念要原创 2020-12-15 15:41:47 · 537 阅读 · 0 评论 -
十,伪类的分类
一,伪类的分类:1,状态伪类:当选择得目标对象状态发生改变后,进行什么样的样式设置。(见章节9)2,结构性伪类:选择子元素去使用的二,结构性伪类的属性:1,:first-child:选择父元素的第一个子元素2, :last-child:选择父元素的最后一个子元素3, :nth-child(num):选择某个元素的一个或多个特定的子元素4, :nth-last-child(num):选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算5, :first-of-type原创 2020-12-13 21:07:40 · 444 阅读 · 0 评论 -
九,伪类样式
伪类样式处理:定义: 通常情况,超级链接上设置的样式,称为伪类作用: 设置超级链接的四种状态(1-4,需要按照顺序来,否则就没有效果):小贴士:1,伪类是用在超级链接上效果比较多,但超级链接不是伪类2,伪类是选择器(冒号前面的是标签,比如a标签。冒号后面的值才是伪类,比如link)属性:1,a:link:未访问的链接2,a:visited:已访问的链接3,a:hover:鼠标移动到链接上(浮动,悬停)具有悬停效果的组件都可以使用这个属性,比如label,input等4,a:active:原创 2020-12-13 21:02:32 · 676 阅读 · 0 评论 -
八,列表的样式
列表的样式:list-style-type:设置列表项目的外观,属性值:none,disc,circle,square(无序列表)decimal等(有序列表,见截图)list-style-position:列表符号的位置,属性值:inside(靠正文比较近,就是靠右),outside(靠正文比较远,就是靠左) 3,list-style-image:把图像设置为列表项目的标记。属性值:url,none(设置了这个属性以后第一个属性将不再生效)list-style:简写属性,涵盖以上三个列表样式属性(如原创 2020-12-13 16:29:44 · 640 阅读 · 0 评论 -
七,字体类样式
描述: font开头,定义文本的字体系列,大小,加粗,风格(如斜体)和变形(如小型大写字母)…属性:font-family :设置字体,包括隶书,仿宋,楷体等字体font-style :规定斜体文本,包括normal(不设置),italic /ɪˈtælɪk/(大多数字体显示斜体,多数使用这个属性值),oblique /əˈbliːk/ (全部字体都斜体)font-weight :文本的粗细,属性值:normal,bold(推荐),100-900(不同浏览器显示不一样,不推荐使用)font-si原创 2020-12-13 16:27:17 · 217 阅读 · 0 评论 -
六,文本类样式
定义:用于对间距,位置,对齐方式等设置,主要处理对其方式,文本修饰,文本转换,文本缩进等,用于对文本进行修饰,比如阴影,下划线等作用: 美化,修饰页面的文字部分相关内容示例:.lineHeight{ line-height: 60px;}常用属性:1,color:表示颜色的内容,用来设置文本颜色颜色设置有3种方法:英文,如red16进制,如#FFB6C1(分别代表红黄蓝三色,2个字母代表一色)#后的数字只能是0-9,a-f,A-FRGB,如255,182,193,语原创 2020-12-13 16:10:24 · 233 阅读 · 0 评论 -
五,外部样式表
说明:外部样式表就是新建一个文档,里面全写css,然后再通过link插入到html代码中作用:使网页的表示层和结构层彻底分离,利于团队合作分工,也使得页面加载变快示例:<link rel="stylesheet" type="text/css" href="index.css">link: 用于定义文档与外部资源的关系,现在用link链接的多是cssrel: 链接的内容type: 要链接的文件类型,可省略href: 要链接的外部样式表的位置```css<!DOCT原创 2020-12-13 16:04:54 · 913 阅读 · 0 评论 -
四,CSS样式设置
一,背景样式1,background-color:设置背景色2,background-image:设置背景图片(跟图片位置)url(“xxx”)3,background-repeat:设置背景图片的重复方向属性值:repeat,repeat-x,repeat-y,no-repeat4,background-attachment:背景是否随滚动条滚动属性值:scroll:图片不随文字一起滚动fixed:图片随文字滚动5,background-position:背景图片的起始位置(属性值可以设原创 2020-12-13 15:55:10 · 113 阅读 · 0 评论 -
二,CSS基础
一,样式表分类(根据引用位置不同进行分类):外部样式(成为一个独立文件)内部样式(在当前文件嵌套使用)行内样式(在当前标签行内使用)二,css样式文件结构<!DOCTYPE html><html><head> <title></title> <style type="text/css"> p{ background-color: red; font-size: 40; }</style>原创 2020-12-13 15:52:23 · 62 阅读 · 0 评论 -
一,CSS简介
一,css简介:简介:什么是CSS?全称:Cascading Style Sheets 层叠样式表CSS的作用:结构与样式分离的方式,便于后期维护与改版可以用多套样式,使网页有任意样式切换的效果使页面载入得更快、降低服务器的成本...原创 2020-12-13 15:51:43 · 255 阅读 · 0 评论 -
三,CSS选择器
作用:选择(找到)需要添加样式的位置常用选择器:标签选择器类选择器具体使用:定义类选择器:引用类选择器:.xxx{}引用标签选择器:p{}<!DOCTYPE html><html><head> <title></title> <style type="text/css"> /**引用标签选择器*/ p{ background-color: red; font-size: 40; }原创 2020-12-13 15:51:01 · 52 阅读 · 0 评论 -
二,CSS入门
一,CSS介绍######1. 定义:层叠样式表(Cascading Style Sheets),决定了HTML元素以什么样的外观展示。目前主流的是css3,常用组合是div+css。css一般定义在head里######2. 三种引入方式:外观样式表:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><h原创 2020-05-24 22:50:28 · 151 阅读 · 0 评论 -
一,HTML简介和基本结构
HTML介绍一,概念超文本标记语言(Hypertext Markup Language)超文本定义:包含了图片,文档,链接,主要体现在链接标记语言:通过定义的标记来约束数据编写的格式和规范种类:xml,html,md特性/作用:数据展示,数据传输dtd概念文档类型定义(Document Type Definition),用来定义标记语言的语法,制定了标记语言的语法规则。二,HTML分类1. html4Strick:不包含过时的标记(basefont,font),不能使用框原创 2020-05-24 16:38:32 · 408 阅读 · 0 评论