413 重温HTML + css 考试 + 访问HTML元素
考试前的复习
初学css
1:认识CSS
1.1：css简介，css全称是层叠样式表，Cascading style sheets
1.2：css的作用，主要是用于定义html内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等
使用css样式的一个好处是通过定义某个样式，可以让不同的网页位置的字体有着统一的字体，字号或者颜色等
1.3：css代码语法
css样式由选择器和声明组成，而声明又由属性和值组成
h1 { color:red;font-size:14px;}
选择器 属性 值{属性和值构成声明}
选择器：指明网页中要应用样式规则的元素
声明：在英文大括号"{}"中的就是声明，属性和值之间用英文冒号":"分割。当有多条声明时，中间可以英文分号":"分隔
css注释代码//是单行注释 /**/ 多行注释 <!----> HTML的注释
2：CSS基本知识（就近原则）
2.1：内联式css样式，直接写在现有的html标签中
2.2：嵌入式css样式，写在当前的文件中
2.3：外部式css样式，写在单独的一个文件中，使用link引入
css样式文件名以称以有意义的英文字母命名
rel="stylesheet" type="text/css"是固定的写法，一定要写到link标签内不可修改
语法格式(<link href="" rel="stylesheet" type="text/css">)
<link>标签位置一般写在<head>标签之内
2.4：优先级
内联式>嵌入式>外部式
3：CSS选择器
3.1：什么是选择器
每一条css样式声明或者定义由两部分组成(选择器（样式）)
3.2：标签选择器
3.3：类选择器
《实际开发过程中使用类选择器最多》
类选择器名称(css样式代码;)
3.4：ID选择器
为标签设置id="id名称"，而不是class="类名称";
ID选择符的前面是#号，而不是英文圆点(.);
3.5：类和ID选择器的区别
相同点：可以应用于任何元素
不同点：(1)ID选择器只能在文档中使用一个，与类选择器不同，在一个HTML文档中，ID选择器只能使用一个，而且仅一次，而类选择器可以使用多次
(2)可以使用类选择器词列表方法为一个元素同时设置多个样式，我们可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，id选择器是不可以的，不能使用id词列表
ID选择器优先于类选择器
3.6：子选择器
还有一个比较有用的的选择器子选择器，即大于符号>，用来选择指定标签元素的第一代元素
3.7：包含(后代)选择器
包含选择器，即加入空格，用于选择指定标签元素下的后辈元素，如右侧代码编辑器中的代码。
3.8：通用选择器(了解即可)
*{color:red;}
*{margin:0;padding:0}//去掉页面样式
3.9：伪类选择符(一般用在链接的标签上面)
伪类选择器：a:link正常连接的方式
a:hover:鼠标放上去的样式
a:active:选择链接时的样式
a:visited:已经访问过的链接的样式
4：常见属性
颜色属性
color属性定义文本的颜色
color：green;
color:#ff6600;
color:#f60;
color:rgb(255,255,255);
color:rgba(255,255,255,1);
字体属性
font-size:字体大小
font-famliy:定义字体
font-weight:字体加粗
4.3：背景属性
背景颜色：background-color;
背景图片：background-image;
背景重复：background-repeat;
背景位置：background-position;
简写方式：
4.4：文本属性
text-align:横向排列
line-height:文本行高
(1):%基于字体大小的百分比行高
(2):数值来设置固定值
text-indent:首行缩进
letter-spacing:字符间距
属性值：normal默认，length设置具体的数值，可以设置负数，inherit继承
4.5：边框属性
4.5.1:边框风格border-style;
(1):统一风格(简写风格)border-style;
(2):单独定义某一方向的边框样式
border-bottom-style:下边框样式
border-top-style:上边框样式
border-left-style:左边框样式
border-right-style:右边框样式
(3):边框风格样式的属性值
none:无边框
solid:直线边框
dashed:虚线边框
dotted:点状边框
double:双线边框
groove:吐槽边框
ridge:垄状边框
inset inset边框
outset outset边框
inherit继承
依托border-color的属性值
4.5.2:边框颜色border-color;
(1):统一风格(简写风格)
border-color;
(2):单独风格
border-top-color:上边边框颜色
border-bottom-color:下边边框颜色
border-left-color:左边边框颜色
border-right-color:右边边框颜色
(3):属性值
颜色值得名称：red,yellow;
RGB:rgb(255,255,0,0.1)
十六进制：#ff0,#ffff00;
(4):属性值的四种方式
一个值：border-color：(上,下,左,右)
两个值：border-color：(上,下)(左,右)
三个值：border-color：(上)(下,左)(右)
四个值：border-color：(上)(下)(左)(右)
4.5.3:简写方式
border:1 2 3 4
5：DIV+CSS布局
5.1：div和span
div和span在整个html标记中，没有任何意义，他们的存在就是为了应用css样式
div和span的区别在于，span是内联元素，div是块级元素
5.2：盒模型
5.2.1:margin
盒子外边距
5.2.2:padding
盒子内边距
5.2.3:border
盒子边框宽度
5.2.4:width
盒子宽度
5.2.5:height
盒子高度
5.3：布局相关的属性
5.3.1：position定位方式
(1):正常定位：relative
(2):根据父元素进行定位：absolute
(3):根据浏览器窗口进行定位：fixed
(4):没有定位：static
(5):继承inherit
5.3.2：定位
左left 右right 上top 下bottom离页面顶点的距离
5.3.3：z-index层覆盖先后顺序(优先级)
5.3.4：display显示属性(学习的重点)
display:none层不显示
display:block块状显示，在元素后面换行，显示下一个块元素
display:inline内联显示，多个可以显示在一行内
5.3.5：float浮动属性
left:左浮动
right:右浮动
5.3.6:clear清除浮动 left、right、both 左、右、左右一起
学习DOM的一些操作流程和一些其他的使用方法
elements：返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件
根据ID访问HTML元素：通过document对象调用getElementById()方法来查找具有唯一id属性值的元素
通过document对象调用getElementById()方法来查找具有唯一id属性值的元素
parentNode、previousSibling、nextSibling、childNodes、firstChild、lastChild、getElementsByTagName(tagName)
DOM访问表单控件
action、elements、length、method、target、reset()、submit()
length:返回表单内表单域的个数
reset() sumbit()重置表单和确定表单
总体来讲 很蒙 需要多看视频 多敲代码
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>查找列表框、下拉菜单控件</title>
- </head>
- <body>
- <select name="city" id="city" size="5">
- <option value="beijing">北京</option>
- <option value="shanghai" selected>上海</option>
- <option value="tianjin">天津</option>
- <option value="nabjing">南京</option>
- <option value="shenzhen">深圳</option>
- <option value="wuhan">武汉</option>
- </select><br>
- <input type="button" value="第一个城市">
- <input type="button" value="上一个城市">
- <input type="button" value="下一个城市">
- <input type="button" value="最后一个城市">
- ---------------------------------------------------------------
| <title>对表格操作</title> | |
| </head> | |
| <body> | |
| <table id="mytable" border="1"> | |
| <caption>甲骨文课程表</caption> | |
| <tr> | |
| <td>HTML</td> | |
| <td>JavaScript</td> | |
| </tr> | |
| <tr> | |
| <td>javaSE</td> | |
| <td>Oracle</td> | |
| </tr> | |
| <tr> | |
| <td>MySQL</td> | |
| <td>Struts2</td> | |
| </tr> | |
| </table> | |
| <input type="button" value="表格标题"> | |
| <input type="button" value="第一行、第一格"> | |
| <input type="button" value="第二行、第二格"> | |
| <input type="button" value="第三行、第二格"><br> | |
| 设置指定单元格的值：第<input type="text" id="row" size="2">行， | |
| 第<input type="text" id="cell" size="2">列的值为 | |
| <input type="text" id="course" size="10"> | |
| <input type="button" id="btn_set" value="修改" onClick="updateCell()"> | |
-----------------------------------------------------------------------------------
| <title>创建元素</title> | |
| </head> | |
| <body> | |
| <ul id="city"> | |
| <li>北京</li> | |
| <li>上海</li> | |
| </ul> | |
| <input type="button" value="创建插入替换节点" onClick="create()"> | |
| <input type="button" value="复制节点" onClick="copy()"> | |
| <input type="button" value="删除节点" onClick="del()"> |
- </body>
- </html>
413 重温HTML + css 考试 + 访问HTML元素的更多相关文章
- struts2 访问Web元素的4种方法
完整代码 :Struts12AccessWebElement.rar 第一种也是最常用的一种方法实现这几个接口 RequestAware,SessionAware,ApplicationAware s ...
- CSS/CSS3 如何实现元素水平居中
更新:可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果,右键查看源代码 -------------------------------------------------分割线---- ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...
- CSS中如何让元素隐藏
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不 ...
- 访问HTML元素（节点）
访问HTML元素等同于访问节点,能够以不同的 方式来访问HTML元素: 通过使用 getElementById() 方法 通过使用 getElementsByTagName() 方法 通过使用 get ...
- css构造块级元素
css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...
- css margin-top设置html元素之间的距离
css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...
随机推荐
- handsontable合并表头
想在页面中做类似excel的操作,发现handsontable符合要求. 然后发现这个文章 http://blog.csdn.net/wynan830/article/details/9054195 ...
- LOJ #6042. 「雅礼集训 2017 Day7」跳蚤王国的宰相
我可以大喊一声这就是个思博题吗? 首先如果你能快速把握题目的意思后,就会发现题目就是让你求出每个点要成为树的重心至少要嫁接多少边 先说一个显然的结论,重心的答案为\(0\)(废话) 然后我们考虑贪心处 ...
- 分享收集的WebGL 3D学习资源
大家好,我在本文中分享了我收集的WebGL 3D相关的博客.书籍.教程.demo等内容,希望对大家学习WebGL和3D有所帮助,谢谢- 相关博客 Wonder技术 Wonder是我们的产品,包含Web ...
- iOS 友盟错误分析-2019
友盟的错误分析越来越人性化了 前提集成了友盟统计,并打包的时候保留了.dSYM文件 先看看效果 可以看到bug显而易见的被发现了!那个文件夹,那一行代码 那么怎么才能这样呢 首先加入符号表,就是.dS ...
- 初识Haskell 四：函数function之二 常见函数
对Discrete Mathematics Using a Computer的第一章Introduction to Haskell进行总结.环境Windows,关于函数的部分太长了,分开写. 常用的对 ...
- Java Selenium中的几种等待方式
Selenium自动化性能测试过程中,经常会出现取不到界面元素,主要原因是界面元素的加载与我们访问页面的时机不一致.可能是界面要素过多或者网络较慢,界面一直加载中:为了解决这种问题,selenium提 ...
- 4月18日 MySQL学习
正式开始了数据库的学习 昨天下好的MySQL 今天正式开始学习的,介绍了多种数据库软件,当然 学习的这个是开源的 免费的. DBMS(数据库管理系统)这就是我们学习的数据库的软件 数据库分为关系型数据 ...
- 使用cURL尝试ElasticSearch
测试环境:debian 9官网提供了 deb,rpm,源码下载 官方下载地址:https://www.elastic.co/downloads/elasticsearch 通过源码安装会遇到一些小问题 ...
- pixy&STM32使用记录（串口&SPI外设）
先踏踏实实的把stm32的外设串口,SPI搞清楚,不要眼高手低,看不起小事.用SPI通信将pixy的数据读出来,将数据用串口发到串口助手上,然后处理数据,利用STM32的定时器调节pwm,控制电机,先 ...
- [搬运] 将 Visual Studio 的代码片段导出到 VS Code
原文 : A Visual Studio to Visual Studio Code Snippet Converter 作者 : Rick Strahl 译者 : 张蘅水 导语 和原文作者一样,水弟 ...