html+CSS
丨Q ,Q丨
这个作者很懒,什么都没留下…
展开
-
CSS样式(选择器)的优先级
CSS样式(选择器)的优先级CSS的优先级机制采用了比较权值的方法一.权值选择器 权值 内联样式 1000 id选择器 100 类/伪类选择器 10 元素选择器 1 通配选择器(*) 0 继承的样式 无 二.优先级规则1.计算选择器的权值例:/*#case 1*/p{...}/*#case 2*...原创 2019-05-20 10:24:31 · 588 阅读 · 0 评论 -
CSS代码的插入方式
CSS代码插入方式1.内联样式——嵌入html标签举例<p style="color:red;">这是一个p标签</p>2.内部样式——写在head标签的子标签style标签中<head> <style type="text/css"> ...CSS代码 </style><...原创 2019-05-17 00:11:36 · 670 阅读 · 0 评论 -
CSS相对定位的特殊之处
CSS相对定位的特殊之处相对定位的元素,本体还在原来的地方先来看段代码:<html> <head> <style type="text/css"> /*取出默认样式*/ *{ margin: 0; } ...原创 2019-05-26 11:35:30 · 261 阅读 · 0 评论 -
CSS背景
CSS背景一.背景颜色 background-color设置背景颜色:background-color: < color name>background-color: rgb(xxx, xxx, xxx);background-color: #xxxxxx;二.背景图片 background-image1.设置背景图片background-image: ...原创 2019-05-26 22:34:01 · 102 阅读 · 0 评论 -
CSS图片整合技术
图片整合技术一.为什么要图片整合当一个页面中,用户必然会请求一些图片资源,比如说,一个按钮(样式采用背景图片)的三种状态(:link, :hover, :active) 如果用三张图片,那么在第一次将鼠标移到这个按钮上,页面就会请求:hover状态下的图片,这样就会出现“闪一下”的现象,影响用户体验,况且,图片资源过多会进行多次请求,影响效率。二.方法将多张图片整合成一张 只加载...原创 2019-05-26 22:43:27 · 419 阅读 · 0 评论 -
CSS的display
CSS的display属性一.所有元素可以设置display属性二.作用设置元素使用的框(盒)模型的类型三.取值none 这个元素不会显示,也不会占据页面空间 block 设置这个元素为块元素 inline 设置这个元素为行内元素(内联元素) inline-block 设置这个元素为行内块元素简单的说一下框的类型不同有什么区别:(i) block,块元素(以下块元素...原创 2019-05-23 01:34:17 · 1931 阅读 · 1 评论 -
CSS的visibility:hidden和display:none的区别
CSS的visibility:hidden和display:none的区别1.visibility属性取值visible 元素的默认值 hidden 元素被隐藏,任然占据空间2.visibility:hidden和display:none两种隐藏的区别visibility:hidden隐藏后,仍然会占据页面空间div{ width: 100px; heig...原创 2019-05-23 01:50:23 · 681 阅读 · 0 评论 -
CSS的overflow属性
CSS的overflow属性这个属性用来设置子元素溢出时,怎样处理取值visible 超出父元素的部分,仍然显示.../*父元素*/.block1{ width: 100px; height: 100px; background-color: skyblue;}/*子元素*/.block2{ width: 50px; height...原创 2019-05-23 02:05:37 · 196 阅读 · 0 评论 -
CSS文档流
CSS文档流一.什么是文档流文档流可以理解为元素的一种状态,处于这种状态下的元素具有一些特性。二.处于文档流的元素的特性块元素多个块元素(兄弟关系)处于文档流时,从上到下各占一行排列。 文档流中的块元素的width的默认值与父元素的width相同。 文档流中的块元素的height的默认由子元素的狂模型的高度决定。(子元素撑起父元素)内联元素多个内联元素在处于文档流时,...原创 2019-05-23 14:55:32 · 154 阅读 · 0 评论 -
CSS高度塌陷
CSS高度塌陷一.什么是高度塌陷当一个元素需要子元素“撑起高度”,也就是说,不给该元素设置高度,而是由子元素的高度来决定时,子元素设置了浮动,这样的情况下,就会出现高度塌陷。<html> <head> <style type="text/css"> .block1{ ...原创 2019-05-23 17:10:05 · 150 阅读 · 0 评论 -
CSS浮动
CSS浮动一.float属性该属性设置元素是否浮动可选值none 不浮动(默认值) left 向左浮动 向右浮动二.浮动浮动有方向之分,即向左浮动/向右浮动;浮动的元素会脱离文本流,并最大程度的移动到左上/右上角(如果可以,优先向上移),直到遇到父元素的边框或者其他的浮动元素。 浮动前...原创 2019-05-23 20:41:01 · 138 阅读 · 0 评论 -
CSS相对定位
相对定位position: relative一.相对定位是相对于哪里定位?(坐标原点)相对定位是相对于没有定位时的位置定位,也就是说,原来(没开启定位时)的位置为坐标原点.block{ width: 100px; height: 100px; background-color: skyblue; /*设置定位*/ position: rel...原创 2019-05-23 23:44:28 · 110 阅读 · 0 评论 -
CSS绝对定位
绝对定位position: absolute一.绝对定位是相对于哪里定位?(坐标原点在哪里)绝对定位是相对于它最近的,开启了定位的祖先元素定位;若所有的祖先元素都没有开启定位,则相对于浏览器窗口定位/*子元素*/.block1{ width: 100px; height: 100px; background-color: skyblue; po...原创 2019-05-24 00:04:35 · 807 阅读 · 0 评论 -
CSS固定定位
固定定位(绝对定位的一种)position:fixed一.固定定位是相对于哪里定位?(坐标原点在哪)固定定位有两个地方是固定的1.坐标原点固定,始终相对于浏览器窗口定位。2.位置固定,移动滚动条时,固定定位的元素位置仍然不变。(参考一些页面旁边的小广告)...原创 2019-05-24 00:19:24 · 2140 阅读 · 0 评论 -
html表格以及常用CSS样式
表格一.表格标签的结构1.使用table标签创建一个表格<table></table>2.table标签的子标签i.thead表示表格的表头ii.tbody表示表格的主体iii.tfoot表示表格的底部所以,表格的最基本框架<table> <thead></thead> ...原创 2019-05-29 13:34:34 · 1256 阅读 · 0 评论 -
CSS垂直外边距重叠
CSS垂直外边距重叠一.什么是垂直外边距重叠?首先,垂直外边距重叠是发生在处于文档流的父子元素;当父元素和子元素的外边距相邻时,如果设置子元素外边距,就会传递到父元素<html> <head> <meta charset="utf-8" /> <style type="text/css"> ...原创 2019-05-29 13:52:53 · 474 阅读 · 0 评论 -
CSS兄弟选择器
CSS兄弟选择器1.作用选择某元素的兄弟元素。2.语法选择器 + 元素{}选中器选中的元素的紧邻的下一个指定元素举例:选中c下面的第一个兄弟... .c + p{ color: skyblue; }...<body> <div> <p class="c"&...原创 2019-05-17 00:05:26 · 2029 阅读 · 0 评论 -
CSS后代选择器和子代选择器
CSS后代选择器和子代选择器1.后代选择器祖先元素和后代元素(相对的概念)后代元素:被包含在祖先元素中的元素。祖先元素:包含后代元素的元素。后代选择器语法选择器1 选择器2 选择器3{}选择器之间用空格隔开举个例子:选中c元素的后代元素span... .c span{ color: skyblue; }......原创 2019-05-16 23:52:36 · 6480 阅读 · 0 评论 -
CSS选择器分组(并集选择器)
CSS选择器分组(并集选择器)当有不止一个选择器需要应用同样的样式时,可以使用并集选择器,可以避免代码重复,提高维护性1.语法选择器1,选择器2,选择器3, ... 选择器n{ CSS样式 }2.作用并集选择器中的所有选择器选中的元素,它们的并集应用样式3.举例... p, span{ color: skyblue; ...原创 2019-05-16 23:33:26 · 1784 阅读 · 0 评论 -
CSS超链接伪类的顺序
CSS超链接伪类的顺序一.超链接用到的伪类伪类 表示状态 link 任何状态 visited 链接处于被访问状态(根据浏览器历史记录判断) hover 鼠标悬浮于元素时的状态 active 当元素被激活(鼠标点击)时 二.优先级对于超链接,一般会选择使用元素选择器来应用样式。a:link{ ...}a:visited...原创 2019-05-20 10:39:59 · 4950 阅读 · 0 评论 -
CSS长度表示
CSS长度表示一. px 像素显示器显示的原理就是在每个像素点显示不同的颜色。px表示像素点的个数例:width : 10px 表示宽度为10个像素点二. 百分比使用百分比设置时,有一点必须满足,设置百分比时,它必须是一个子元素,百分比是相对于父元素的相同属性而言举个例子: body{ width: 100px; ...原创 2019-05-20 13:01:52 · 354 阅读 · 0 评论 -
CSS颜色的表示
CSS颜色的表示一.英文单词这个比较简单,通过查手册就可以,但是不推荐,因为不灵活。二.RGB值RGB值是三个值,三个值分别表示red,green,blue三个颜色的亮度,三个值的范围都是0 ~ 255。1.直接用数字表示rgb值例如:rgb(255, 255, 255)2.使用百分比表示rgb值例如:rgb(100%, 100%, 100%),这种表示会通过计算,...原创 2019-05-20 13:09:57 · 241 阅读 · 0 评论 -
html列表
html列表一.无序列表1.标签无序列表的标签为 < ul >2.属性type可以设置无序列表中每一项前面的项目符号这个属性不推荐使用,不同浏览器的显示效果不同,通常用CSS将项目符号去掉ul{ list-style: none;}如果想要加上项目符号,一般设置< li >的背景图片实现。3.子标签 < li >...原创 2019-05-20 13:33:36 · 324 阅读 · 0 评论 -
元素之间的覆盖以及层级
元素之间的覆盖以及层级一.父子元素之间的覆盖子元素覆盖父元素二.兄弟元素之间的覆盖1.只有一个元素使用了定位若一个元素设置了定位,那么会它的层级会提升,所以会覆盖其他兄弟元素(假设它的兄弟元素没有使用定位)2.多个兄弟元素使用了定位A.默认情况如果互为兄弟的元素都使用了定位,那么在HTML中写在下面的兄弟元素会覆盖上面的兄弟元素B.通过z-index属性修改元素...原创 2019-05-24 13:33:02 · 2396 阅读 · 0 评论 -
CSS字体设置
CSS字体一.字体类型(font-family)通过font-family设置字体类型,常见类型宋体,微软雅黑等例如:p{ font-family:微软雅黑;}这些常见的类型具体到了某一种字体,接下来说一下通用的类型,也就是从其他角度将这些具体的类型进行了归类通用字体1. serif 衬线字体2. sans-serif 非衬线字体3. monospace...原创 2019-05-20 23:37:09 · 396 阅读 · 0 评论 -
CSS行高
CSS行高 line-height一.网页中的文本文本中的每一个字符都有一个不可见的框,这些框又被放在两条不可见的横线中(垂直居中),两条横线的距离就是行高,放个图片理解下二.行高的设置方法1.直接设置p{ line-height: 100px;}2.相对值有两种相对值:都是相对于font-size而言百分比p{ font-si...原创 2019-05-21 00:05:45 · 12698 阅读 · 1 评论 -
CSS文本样式
CSS文本样式一.英文字符大小写 text-transform取值none 原始样式(默认值) capitalize 每个单词首字母大写 uppercase 所有字母都大写 lowercase 所有字母都小写二.文本的修饰 text-decoration可以在文字上方,中间,下方加一条横线,这个属性用来设置是否添加这条横线以及这条横线的位置取值none 没有横线(默...原创 2019-05-21 00:17:12 · 128 阅读 · 0 评论 -
HTML超链接
HTML超链接使用< a >标签标签属性1.href该属性的值:相对路径或绝对路径点击该超链接后,将会跳转到该路径(发送HTTP请求)百度我将这段代码嵌套到了这里,点击一下有一个直观的感受,target属性暂时不用管<a href="http://www.baidu.com target="_blank">百度</a>#...原创 2019-05-16 00:39:14 · 172 阅读 · 0 评论 -
CSS简单选择器
CSS简单选择器选择器:选中页面中的元素,并将选择器后面的样式代码应用到选中的样式。1.元素选择器作用:选择页面中所有指定元素(标签)语法:标签名{ CSS样式 }举例:选中所有的p元素并应用样式。... p{ font-size: 20px; color: skyblue; }......原创 2019-05-16 21:38:24 · 258 阅读 · 0 评论 -
HTML基础内容
HTML基础内容1.文档声明 <!doctype>标签标签作用:声明网页使用的html版本(标准)。<!doctype html>表示使用html 5。 也就是说,浏览器使用html的那个版本解析网页。开发过程,使用<!doctype html>即可如果不写,一些浏览器会进入怪异模式(一种解析页面的方式,另一种方式为标准解析),可能会造成...原创 2019-05-16 00:14:51 · 70 阅读 · 0 评论 -
CSS伪类
CSS伪类1.什么是伪类伪类表示元素的状态。2.常见伪类伪类 表示状态 link 链接处于初始状态 visited 链接处于被访问状态(根据浏览器历史记录判断) hover 鼠标悬浮于元素时的状态 active 当元素被激活(鼠标点击)时 focus 元素拥有键盘的焦点时 first-child 该元素是父元素所有子...原创 2019-05-16 22:35:37 · 95 阅读 · 0 评论 -
CSS伪元素
CSS伪元素1.作用:选中元素的特定位置,并应用样式2.伪元素伪元素 表示位置 first-letter 第一个字符 first-line 第一行 before 元素前 after 元素后 3.语法选择器:伪类{ CSS样式 }选择器选中的元素,伪元素表示要在该元素的哪里应用样式。4.举例在杂志中经常可以看到,一篇文...原创 2019-05-16 23:00:46 · 333 阅读 · 0 评论 -
CSS属性选择器
CSS属性选择器通过元素(标签)的属性(以及属性的值)选择元素,并应用CSS样式语法 解释 选择器[属性名] 选中拥有特定属性的特定元素 选择器[属性名=属性值] 选中拥有特定属性,并且该属性的值为指定的值的特定元素 举例:选中配置了title属性的p元素 p[title]{ font-size: 30px; ...原创 2019-05-16 23:23:49 · 102 阅读 · 0 评论 -
html表单
html表单以及表单项表单的作用是将信息提交到服务器一.通过form标签创建一个表单form标签的属性action 表单提交目的地的相对路径 method 表单提交时的请求方式(get或post,默认为get)二.表单项说明:表单提交到服务器时,表单中的所有信息(每个表单项)都以“键值对”的形式提交到服务器,所以,对于每一个表单,都有两个属性,一个是name属性(键值对的键...原创 2019-06-03 00:49:54 · 204 阅读 · 0 评论