<form>标签及CSS样式选择器

最新推荐文章于 2022-07-06 20:06:22 发布

wudong52

最新推荐文章于 2022-07-06 20:06:22 发布

阅读量1.3k

点赞数 1

文章标签： css url 标签浏览器服务器

本文链接：https://blog.csdn.net/wudong52/article/details/52981250

版权

一、<form></form>
此标签是用来创建一个表单，也就是定义表单的开始和结束位置，<form>标签具有下面等属性：
1、action属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。
2、Method属性用来定义浏览器将表单中的信息提取出来交给服务器端的处理程序的方式（即定义处理程序从表单中获取信息的方式）。它的值有get和post两种。
3、target属性用来设置实现的位置。
4、title属性：当鼠标放在内容上会显示相应的内容（任何标签都可以使用）。
5、enctype指示浏览器使用哪种编码方法将表单数据传送给WWW服务器。
application/x-www-form-urlencoded(默认的)；
multipart/form-data(文件上传的时候)

二、CSS设置中的样式选择器：

<html>
    <head>
        <title>CSS中的样式选择</title>
        <style>
        p{
        color:red;
        font-size:4cm;
        }
        </style>
    </head>
    <body>
    <p>wwwaaabbbb</p>
    </body>
</html>

上述的全局标签中，style标签中的p元素就是样式选择器。
样式选择器表示如下：

selector{
/*其中selector就是样式选择器*/
property1: value1;
property2: value2;
......
}

一些样式选择器：

.nav{}
#left{}
a,b,h1,#one{}
a b h1 #two{}
a:hover,a:link{}
div{}
ul{}
li{}

2.1、HTML选择器
1、HTML中有标签，则CSS就用选择器。选择符就是赋予内部或外部样式表的名字，就是HTML的标签，用来改变一个指定标签的样式。
2、任何一个元素都可以使一个CSS选择符

2.2、类选择器
1、同一个选择器能有不同的类，因而允许同一个元素有不同的样式

<head>
<style>
p.cla1{}
p.cla2{}
</style>
</head>
<body>
<p class="cla1">aaaaaa</p>
<p class="cla2">bbbbbb</p>
</body>

2、类选择器定义的方法
元素名[tag].类名（类名为自定义的）
若不加tag,则代表所有HTML元素标签。

<tag class="类名">内容</tag>

同一个标签可以有多个类(用空格分开)：<p class="cla1 cla2">neirong</p>

2.3、ID选择器
1、在HTML页面中，ID属性指定了某个单一元素，ID属性就用来对单一元素定义单独样式。
2、一个HTML页面中，ID属性值要唯一(而class属性可以不唯一)
3、#idname{}

<tag id="idname">

<style>
#id1{
}
#id2{}
</style>
<body>
<p id="id1">neirong</p>
<p id="id2">neirong1</p>
</body>

4、idname是自定义的名称

2.4、关联选择器
1、是一个用空格隔开的两个或多个单一选择器组成的字符串

<style>
div #one .two p{}
</style>
<body>
<div id="one">
    <div class="two">
        <p>hhhhh</p>
    </div>
</div>
</body>

2、由于层叠顺序的规则，它们的优先权比单一的选择符大，所以必须按关联关系使用，不能有反顺序。只要能保持关联关系就可以，不管是在多少层

2.5、组合选择器
为了减少样式表的重复声明，组合是被允许的，只需使用英文逗号隔开每个选择符。

<style>
    div,#one,.two,p,h1,h2{}
</style>
<body>
    <div>wwww</div>
    <h1>dddd</h1>
    <p>yujkjjnn</p>
</body>

2.6、伪元素选择器
它是指对同一个HTML元素在不同的状态下的一种定义方式。目前只有a和p两处HTML元素可以使用。使用的语法：
标签：伪元素
a:link 没有任何运作前的状态
a:hover 光标移动到超链接上的状态
a:action 选择超链接的状态
a:visited 访问过超链接的状态
p:first-letter 一个段落中首个字母的状态
p:first-line 一个段落中首行的状态

<style>
a:link{}
a:hover{}
a:action{}
a:visited{}
p:first-letter{}
p:first-line{}
</style>
<body>
<a *(class="one")* href ="http://www.baidu.com">www</a><hr>
<a *(class="two")* href ="http://www.baidu.com">abc</a><hr>
<p>
wuhuuuuuu<hr>
rrttuui<hr>
</p>
<p>
wuhqqqqq<hr>
rryyyyyy<hr>
</p>
</body>

还可以分类设置：

a.one:link{}
a.one:hover{}
a.two:link{}

可以使用组合选择器声明设置：

a:link，a:visited{}

三、样式规则的继承
所有嵌套在某个HTML标签中的HTML标签都会继承外层标签的杨思规则。

<style>
div{}
</style>
<body>
    <div>
        <p>jjjjjjj</p>/*此处的内容继承了设置在div中的样式*/
    </div>
</body>

四、样式规则的优先级
关联选择器>ID选择器>CLASS选择器>HTML标签选择器

wudong52

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
<form>标签及CSS样式选择器

一、<form></form> 此标签是用来创建一个表单，也就是定义表单的开始和结束位置，<form>标签具有下面等属性： 1、action属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。 2、Method属性用来定义浏览器将表单中的信息提取出来交给服务器端的处理程序的方式（即定义处理程序从表单中获取信息的方式）。它的值有get和post两种。 3、target属性用来设置实
复制链接

扫一扫