什么软件做网站做好,小程序制作公司排行,成都互联网公司有哪些,知页wordpress文章目录 一 表单(1) 数字控件(2) 颜色控件(3) 日期控件(4) 月份控件(5) 星期控件(6) 搜索控件(7) 范围控件 二 浮动框架三 结构化标签四 CSS1 CSS概述2 CSS的编写位置1. inline style 行内样式2. inner style 内部样式3. outer style 外部样式4. 小结 3 CSS选择器1. 通用选择器… 文章目录 一 表单(1) 数字控件(2) 颜色控件(3) 日期控件(4) 月份控件(5) 星期控件(6) 搜索控件(7) 范围控件 二 浮动框架三 结构化标签四 CSS1 CSS概述2 CSS的编写位置1. inline style 行内样式2. inner style 内部样式3. outer style 外部样式4. 小结 3 CSS选择器1. 通用选择器2. 标签选择器3. id选择器4. 类选择器5. 群组选择器6. 伪类选择器7. 并列选择器8. 后代(包含)选择器 五 作业六 拓展 一 表单
input新表单元素
(1) 数字控件
input typenumber step7 min10 max30/ 属性: min: 最小值 max: 最大值 step: 步长值每次递增或递减的大小默认的步长为1 注意此控件无法阻止用户自行输入数据
(2) 颜色控件
input typecolor/ 提供了一个取色器默认的颜色是黑色
(3) 日期控件
input typedate/ 只出现日期的(年月日)的选择后续还可以使用更加美观的日期插件
(4) 月份控件
input typemonth/ 只出现年月的选择
(5) 星期控件
input typeweek/ 只出现年周的选择
(6) 搜索控件
input typesearch/ 提供了一个快速删除所有输入数据的小叉叉
(7) 范围控件
input typerange min0 max20 step2/ 属性 min: 最小值表示区间的最开始的值 max: 最大值表示区间的最末尾的值 step: 步长表示数字移动的范围跨度 作用: 可以控制区间比如:音量 地图缩放 进度 注意:设置步长的时候尽量选取可以除得尽的值否则区间中会有部分值无法选中
二 浮动框架
iframe 是指在一个html页面中引入其它的html页面 属性
src被引入的资源的url width设置被引入资源在本页面的宽度 height设置被引入资源在本页面的高度scrollingno 是否需要拖拽条no表示不要frameborder0 去掉被引入资源的边框线
优劣势:
我们可以直接引用已经写好的页面比较方便一个页面可以被多个页面使用复用性高样式不好控制有额外的链接请求的次数会增加速度会变慢
三 结构化标签
h5新增了带有结构语义的标签来取代div. 虽然在用户看来和之前使用div没有区别但带语义的标签可以增加代码的可读性而且方便实现页面各个部分的划分让网络爬虫更快找到. 但注意:低版本的浏览器可能会出现不兼容的问题. header/header 定义网页的头部或者某个区域的顶部 navnav/ 定义网页的导航区域 section/section 定义网页的主体区域 aside/aside 定义网页的侧边栏 articlearticle 定义与文字相关的内容比如论坛、回帖 footer/footer 定义网页的尾部或者某个区域的底部
四 CSS
1 CSS概述
CSS:Cascading Style Sheet 级联样式表 样式: 元素的背景 大小 位置 边框 阴影… 1995年诞生目前学习的是CSS3 HTML负责页面内容 CSS负责页面的样式 也就是说我们用CSS修饰HTML的内容
2 CSS的编写位置
1. inline style 行内样式
标签名 style“color:red;”/标签名 color指的是属性名 red指的是属性值 行内样式只能渲染当前元素不能与其他元素共享 因为是单独渲染该标签所以优先级非常高但不利于修改复用性很差
2. inner style 内部样式
在html文件的head标签中添加style标签在style标签中写CSS样式 内部样式可以供当前页面中多个元素共享但不能给其他页面的元素共享
3. outer style 外部样式
把样式声明在一个独立的.css文件中需要此样式的HTML页面在自己的head标签中添加link标签引入该CSS样式即可 link relstylesheet href01.css rel表示引入的文件时什么类型 必写属性 stylesheet样式表 href表示被引入的CSS文件的路径
4. 小结
CSS的基础语法 属性名:属性值; 属性名:值1 值2 值n…; 编写CSS的三种方式: 1.行内样式inline style给指定的某一个元素加样式 2.内部样式inner style写在style标签中整个页面都生效 3.外部样式outer style: 写在独立的CSS文件中谁引入谁生效
生效范围 行内样式内部样式外部样式 样式优先级 行内样式(内部样式外部样式)浏览器的专有样式
3 CSS选择器
CSS选择器用在内部或外部样式中告诉浏览器这些样式要渲染在哪些HTML元素上
1. 通用选择器
*表示所有 表示当前页面上所有的标签都应用该样式 因为选中的是所有的元素所以优先级非常低性能低
2. 标签选择器
选中某类特定的HTML标签选择器的名字就是标签名 优点快速为当前页面中同种类型的标签统一样式 缺点选择太广泛不能设计差异化样式
3. id选择器
选中页面上唯一一个元素注意:id值与#之间不能有空格 要先在标签中加id属性再让CSS选中 优点:能够非常直观的找到该元素优先级非常高 但是推荐少用因为习惯上id值经常用于绑定JS代码较少用于样式
4. 类选择器
选中某一类指定的元素这个类名是可以自定义的 一个class属性的值可以写多个值与值之间使用空格隔开 注意:使用选择器时(.)与class值之间不能有空格
5. 群组选择器
一次使用多个选择器选中多个元素选择器间使用逗号分隔 注意群组选择器不限制选择器必须是同一类型的可以在一个群组选择器中使用多种不同类型的选择器
6. 伪类选择器
“假的类”——注意伪类选择器的类名是固定的不能自定义表示选中某个时刻/状态 :hover{ } 选中鼠标悬停在元素上方时的状态 :active{ } 选中元素被激活时的状态(鼠标按住元素不松开) :link{ } 选中超链接未被访问过的状态 :visited{ } 选中超链接已经被访问过的状态 注意:a标签的伪类有优先级:link visited hover active 如果想要看到四个状态的效果必须按照此指定顺序来写 超链接自己是有默认样式的未被访问过是蓝色的激活是红色的访问过后是紫色的 :focus{ } 选中输入框获得焦点时的状态
7. 并列选择器
选中可以同时被多个选择器选中的元素 注意多个选择器之间不能有空格必须紧挨着写
8. 后代(包含)选择器
这部分在第五天的 DAY05 CSS中。五 作业
思考并实验 相同选择器不同的样式会如何渲染 相同选择器相同的样式会如何渲染 id选择器 标签名选择器 class选择器 通用选择器 优先级如何排列写一个用户名输入框提示文字请验证自己的用户名是否正确 样式要求提示文字的默认颜色为透明色transparent当输入框获得焦点时将输入框的背景颜色改为黄色提示文字字体颜色改为红色仿写学子商城首页导航条的效果实现效果 默认颜色#ccc 悬停颜色#B8B8B8 访问过后颜色#ccc 激活颜色 #0aa1ed
六 拓展
多媒体标签 属性 src 是指被引入资源的路径 controls 用于添加音视频的控制组件
