博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第二课 HTML+CSS
阅读量:6580 次
发布时间:2019-06-24

本文共 2800 字,大约阅读时间需要 9 分钟。

 

HTML

滚动字幕标签 <marquee>

滚动

属性 描述
默认属性 字幕从右到左滚动,循环
滚动
hight 高度
direction

滚动的方向,

值:left 向右; up 向上; down 向下;

hspace 滚动的区域 
width 宽度 
behavior 

值:slide 到达目的地后,停止滚动

      alternate  字幕来回循环滚动

sctollamount 滚动的速度,值越大,滚动越快
scrolldelay  停顿时间,毫秒

 

 

 

 

 

 

 

 

 

 

 

 

 

<form></form>  表单

表单传值(取值)方式:

get:显性的传值,可在地址看到内容,适合传数据量小,和对安全系数没要求的。

post:安全性相对get要高,无法在地址栏看到内容,可传数据量多,对安全性有要求的。

 重点:表单元素

button 普通按钮控件
reser 重围按钮控件
submit 提交按钮控件
image 图像按钮控件 用图像做成按钮效果,点击可提交表单。一般情况不建议使用此种方式
checkbox 复选框控件 123
radio 单选框控件 AB
请注意name用法,相同的name为一组
text 文本输入控件 这是一个单行的文本输入框
textarea 多行文本输入标签 >
password 密码输入控件 输入的密码,以●●替代
file 文件上传控件

效果:

 

CSS

1、CSS是什么?

叠层样式表。通俗的讲,是用来做网页外观的。

2、样式的控制方法

2-1、行内样式:

<div>标签:块级元素

style 属性:规定元素的行内样式,它的值是CSS属性和值,多个css属性和值用分号来分隔。

在标签中,通过style 来规定此标签的样式。

 <div style="height:100px; width:100px; border:solid 1px #609;"></div> 

 

2-2、内嵌式:

2-2-1、通过标签式的选择器,来定义整个页面内,此标签的样式。

1.标签选择器: 此例题用的标签是:div 无标题文档

在body中的div标签,它用的样式通过head中的style来定义,注意写法,它定义的是整个页面的div,都用这个样式。

2-2-2、class 属性

规定规定元素的类名,也可规定指向样式表中的类

无标题文档
你你你你你
你你你你你 C1

其它标签同样可以调用 C2

C2的颜色把C1给覆盖,C1 C2

效果:

 
注意:优先级,class要优先于标签选择器。      在定义时,前面要加上符号"."

 2-2-3、id 属性

调用方法与CLASS类同,定义时,前面使用符号“#

注意优先级,ID>CLASS>标签选择器

并且一个页面中,ID只能有一个,不能重复,也不能多次调用。

 

2-3、链接式:

把HTML与CSS分开不同的文件。

知识点:标签的继承性(请注意),留意视频视频课程。

 

HTML 文件 注意
标签 通过link来调用css样式文件 href : CSS 样式文件的路径
无标题文档
你你你你你
你你你你你 C1

其它标签同样可以调用 C2

C2的颜色把C1给覆盖,C1 C2

 

CSS文件 写法与前面相同 div{
width:100px; height:100px; border:solid 1px #000; color:#30F}.c1{
color:#F00}.c2{
color:#F0F}

 

3、字体样式

CSS文字效果 {
font-size:24px; /* 字体大小 */ font-family:"宋体"; /* 字体 留意系统字库*/ font-weight:500; /* 加粗 */ color:"red"; /* 颜色 */ decoration:underline; /* 下划线 */ decoration:overline; /* 顶划线 */ decoration:line-through; /* 删除线 * }
{
transform:capitalize; /* 单词首字大写*/transform:uppercase; /* 全部大写*/transform:lowercase; /* 全部小写*/letter-spacing:10px; /* 默认为normal */text-align:center; /* 文本水平居中 */text-align:Left; /* 文本水平居右 */text-align:right; /* 文本居左 */line-height:100px; /* 文本垂直高度 */}

 

转载于:https://www.cnblogs.com/malagao-facebook/p/4823219.html

你可能感兴趣的文章
java并发库之Executors常用的创建ExecutorService的几个方法说明
查看>>
23种设计模式(1):单例模式
查看>>
socket 编程入门教程(五)UDP原理:4、“有连接”的UDP
查看>>
Jquery获取iframe中的元素
查看>>
Laravel 学习笔记5.3之 Query Builder 源码解析(下)
查看>>
Struts2简单入门实例
查看>>
2012CSDN年度博客之星评选http://vote.blog.csdn.net/item/blogstar/xyz_lmn
查看>>
BZOJ 4037 [HAOI2015]数字串拆分 ——动态规划
查看>>
SpringBoot实战总汇--详解
查看>>
2018年7月1日笔记
查看>>
尝试使用iReport4.7(基于Ubuntu Desktop 12.04 LTS)
查看>>
动态规划:金矿模型
查看>>
子元素应该margin-top为何会影响父元素【转】
查看>>
AJAX 状态值(readyState)与状态码(status)详解
查看>>
BZOJ3668:[NOI2014]起床困难综合症(贪心)
查看>>
LightOJ 1245(Harmonic Number (II))
查看>>
小知识记录
查看>>
109. Convert Sorted List to Binary Search Tree
查看>>
css3 animate 和关键帧 @-webkit-keyframes
查看>>
文字链接颜色设置
查看>>