初识：表单基础以及css基础

最新推荐文章于 2024-08-17 22:24:13 发布

期待!!

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量434

点赞数 2

分类专栏： wed前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_66180299/article/details/122895875

版权

wed前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了HTML中的表单元素，包括表单框、文本框、密码框、重置和提交按钮，以及占位符的使用。同时，详细讲解了CSS的基础知识，如概念、语法、样式的创建方式（内部、外部、内联）。还探讨了各种选择器，如类选择器、ID选择器、群组选择器等，并详细阐述了选择器的权重。此外，还涵盖了CSS注释的使用方法。

摘要由CSDN通过智能技术生成

1.表单的作用

2.表单的组成

3.CSS简介

4.CSS语法

5.CSS样式的创建

6.CSS选择器

7.选择器的权重

8.浮动属性的简单应用

9.HTML CSS注释

一、表单的作用及组成

表单的作用：用来收集用户信息

表单组成：表单框（form）

1）.表单框

2).文本框

3).密码框

4).重置按钮和提交按钮

<input type ="submit" value="提交按钮"/> 提交按钮

<input type ="reset" value="重置按钮"/> 重置按钮

5）.表单中的灰色文字例:QQ号码/手机/邮箱

二、CSS简介

1.CSS概念：层叠样式表英文全名：cascading style sheets

2.Wed简单来说就是如何修饰网页信息的显示样式

3.用来修饰XHTML或者XML等样式文件的计算机语言

三、CSS语法

CSS语法：选择器{属性：属性值；属性：属性值；}

例：div{width:200px height:200px; background-color:blue;}

四、CSS样式的创建（内部样式，外部样式，内联样式）

1.内部样式

<style type="">

CSS语句

</style>

注：使用内部样式最好将标记放在<head></head>里面

2.外部样式

第一种外部样式方法：

rel (relation): 用于定义文档关联，表示关联样式表。

type:定义文档类型

第二种外部样式表方法

@import url(文件路径全称);

</style>

注：@和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束；

3.内联样式

语法：<标签 style="属性"：属性值；></标签>

例：<div style="width：200px height：200px"></div>

五、CSS选择器

1. 类选择器

div，p，h1，img，a，span，i，em，b，strong，ul，li，ol，dl，dt，dd，，，

2). id选择器

语法：#id名{属性：属性名}

例：

1)使用id选择符时，应该为每个元素定义一个id属性

2)id选择符的语法格式是“#”加上自定义的id名

#div{width:300px;height:300px}

3)起名时要去英文，要语义化

3）.群组选择器

语法：选择符1，选择符2，选择符3......{属性：属性值;}

例：#box,h1,p{ width:960px}

说明：当有多个选择器时，要用 "，"隔开

4）.class选择器

语法：class{属性：属性值}

例：<div class=”box“></div>

.box{ widyh:200px; height:200px;}

5).*通配符

语法：*{ 属性：属性值}

例：*{margin:0; padding:0;} 清除默认的内外边距

6）后代选择器

语法：选择符1 选择符2{属性：属性值；}

说明：选择符1包含所有选择符2

例：<ul>

</ul>

ul li{ color:red;}

7.子选择器

作用：想要改变某个父元素下面所有的儿子元素的时候

父元素>子元素{}

例 ul>li{}

8.相邻兄弟选择器

作用：想要改变某个元素后面紧挨着的元素的时候

选择器1+选择器2{}

例 div+p{}

9.通用兄弟选择器

作用：想要改变某个元素后面所有的元素的时候

选择器1~选择器2{}

例 div~p{}

7)伪类选择器

a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;

六.CSS选择器的权重

类型选择符（元素选择器）的权重为0001 如：div{width:100px; height:100px;}
class选择符(类选择器)的权重为0010 如：.box{width:100px; height:100px;}
id选择符的权重为0100 如：#box{width:100px; height:100px;}

内联样式的权重为1000 如：<div style="width:100px; height:100px;"></div>

七.页面中的注释

Html注释

css的注释
/* 我是css的注释 */

快捷键：ctrl+/

八.补充

CSS语法

font-style:12px; 字体大小
font-family: 楷体；字体类型
font-weight：800；字体加粗范围：100-900
font-style：italic; 斜体 normal（默认显示）
text-align:center; 让字体居中
text-align：justify; 水平两端对齐，但只对多行起作用
line-height：20px；让字垂直居中
font-size：0；清除图片下面的小间距
list-style：none; 去除li标签前面的小点
text-indent：1em; 首行缩进
letter-spacing：12px; 控制文字和文字之间的间距

CSS背景属性

背景图片定位 background-position：center center; 居中
背景图片固定 background-attachment：fixed；固定