分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

CSS

发布时间:2023-09-06 01:42责任编辑:熊小新关键词:CSS

1、列表

1、有序

<ol></ol>

<li></li>

属性:

1、type

2、start

2、无序

<ul></ul>

<li></li>

属性:

1、type

取值:

circle

square

disc(默认)

none

3、定义列表

<dl>

<dt></dt>

<dd></dd>

</dl>

2、结构标记

<header></header>

<nav></nav>

<section></section>

<article></article>

<aside></aside>

<footer></footer>

3、表单

1、表单元素

<form></form>

属性

1、action

表单提交的服务器程序路径

2、method

1、get

2、post

3、enctype

1、application/x-www-form-urlencoded

2、multipart/form-data

3、text/plain

2、表单控件

1、input元素

语法:<input>

属性:

1、type

2、name

3、value

4、disabled

1、文本框与密码框

<input type="text">

<input type="password">

属性:

1、maxlength

2、readonly

2、单选按钮和复选框

1、单选按钮

<input type="radio">

属性:

name:分组,一组中最多只能有一个按钮被选中

checked:默认被选中

2、复选框

<input type="checkbox">

name:分组,在后台服务器中,可以以一个组名获取所有的选中值。

checked:默认被选中

3、按钮

1、提交按钮

<input type="submit">

功能:提交表单数据到服务器

2、重置按钮

<input type="reset">

功能:将表单数据恢复到初始化

3、普通按钮

<input type="button">

功能:执行客户端脚本

4、隐藏域和文件选择框

1、隐藏域

<input type="hidden">

2、文件选择框

<input type="file">

注意:

1、表单的 method 必须为post

2、表单的 enctype 必须为 multipart/form-data

2、textarea元素

<textarea>内容</textarea>

属性:

1、name :名称

2、cols :一行中的字符数,变相设置宽

3、rows :默认显示多少行数据

4、readonly

3、select 和 option 元素

选项框(下拉选项框,滚动列表)

<select></select>

name:名称

size:大于1的话则为滚动列表

multiple:设置多选

<option></option>

value:值

selected:预选中

4、其他元素

1、为控件分组

<fieldset>

<legend>组名</legend>

</fieldset>

2、关联文本与表单控件

<label>文本</label>

属性:

for:要关联的表单控件的ID值

3、按钮

<button>内容</button>

注意:

该元素 放在 form 中则为提交按钮,否则为普通按钮(IE除外)

4、其他元素

1、浮动框架

<iframe>内容</iframe>

属性:

src:引入浮动框架的url

width:

height:

frameborder:浮动框架的边框

2、摘要与细节

<details>

<summary></summary>

</details>

3、度量元素

<meter>内容</meter>

min:最小值,默认为0

max:最大值,默认为1

value:显示的度量值

4、高亮显示

<mark></mark>

5、时间元素

<time>文本内容</time>

datetime:关联的日期时间

=================================

1、CSS概述

2、CSS语法

3、尺寸与边框

=================================

1、CSS概述

1、问题

1、设置页面中所有的文本颜色为红色

2、页面中所有的div里面的文本的颜色变为 蓝色

3、页面中所有的div里面的文本的颜色变为 绿色

HTML元素属性的弊端:

1、想完成相同效果,却要使用不同属性

2、HTML元素改变的样式可重用性不高

2、CSS

CSS:Cascading Style Sheets

层叠样式表,级联样式表,样式表

特点:

1、实现了网页内容与表现相分离

2、提高了代码的可重用性和可维护性

3、CSS与HTML之间的关系

1、HTML用于构建网页的结构

2、css负责构建HTML页面元素的样式

4、HTML属性和CSS样式的使用原则

W3C建议 尽量使用CSS样式取代HTML属性

1、修改文本的颜色

推荐使用css的color属性

2、修改元素的背景颜色

推荐使用css的background-color属性

如果是HTML元素所特有的属性的话,只能使用HTML元素属性

td元素属性colspan

5、使用CSS样式表的方式(重点)

1、内联方式

作用:将样式定义在单个的HTML元素中

语法:

<ANY style="样式声明1;样式声明2"></ANY>

样式声明语法:

样式属性:属性值

eg:

1、文本颜色的样式属性

color:red;

2、背景颜色的样式属性

background-color:green;

3、文本大小的样式属性

练习:设置页面上的 某个 div 元素中的 样式 , 文本颜色为 黄色(yellow),背景颜色为黑色(black),字体大小为48像素

2、内部样式表

1、特点

应用范围为整个页面而不是某一个别元素,能够提升可重用性和可维护性,同时体现内容与表现相分离

2、语法

1、在 <head>元素中 增加 <style></style>标记用来声明样式

2、在 <style></style>元素中 编写若干 “样式规则”

样式规则语法规范:

&nb

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved