css

最新推荐文章于 2025-04-14 09:17:10 发布

Ching_cl

最新推荐文章于 2025-04-14 09:17:10 发布

阅读量419

点赞数

CC 4.0 BY-SA版权

分类专栏：学习文章标签： css

本文链接：https://blog.youkuaiyun.com/Ching_cl/article/details/48770341

学习专栏收录该内容

27 篇文章

订阅专栏

本文介绍了CSS的三种引用方式及选择器，并详细讲解了HTML5中新增的input类型及表单属性，帮助读者掌握现代网页开发的基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中的引用方式:

1,外部样式表:

外部样式表在单独文件中定义，并且在`<head></head>`标签对中使用link标签来引用。

代码公式:`<link href="index.css"    rel="stylesheet" type="text/css" />`

2, 内部样式表:

内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在<style></style>标签对内，并且<style></style>标签对是放在<head></head>标签对内的。

代码公式:`
<head>
<title></title>
<!--这是内部样式表，CSS样式在style标签中定义-->
<style type="text/css">
    p{color:Red;}
</style>
</head>
<body>
<p>内部样式表</p>
<p>内部样式表</p>
<p>内部样式表</p>
</body>`

3,内联样式表:

内联样式表，也是把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在`<style></style>`标签对中定义，而是在标签的style属性中定义。

代码公式:
<head>
<title></title>
</head>
<body>
<p style="color:Red; ">内联样式表</p>
<p style="color:Red; ">内联样式表</p>
<p style="color:Red; ">内联样式表</p>
</body>`.

二.选择器

1.元素选择器:
(元素){声明:值},类似:div{ border:1px solid red}
2.ID选择器:
先给元素p命一个ID叫:div(<p id="div"></p>)
    #div{ border:1px solid red}
3.类选择器:
先给元素p命一个class值等于div(<p class="div"></p>)
然后.div{ border:1px solid red}

伪类选择器:
可以不同方式格式化超链接<a>标签元素:
1.a:link是用在未访问的链接选择器;
2.a:visited是用在已访问过的超链接的选择器;
3.a:hover是用在鼠标光标放在其上的链接选择器
4.a:active是用在获得焦点(比如被点击)的链接上的选择器.
注:伪类选择器的具体性,为了避免使用伪类选择器的冲突,因此对链接编写样式规则时,必须按照以下方法顺序编写代码;
(   a{},
    a:link{},
    a:visited{},
    a:hover{},
    a:active{}.     )

一.HTML5 input类型

1.<input type="email" name="user_email" /> 
在提交表单时，会自动验证 email 域的值。

2.<input type="url" name="user_url" />
在提交表单时，会自动验证 url 域的值。

3.<input type="number" name="points" min="1" max="10" />
number 类型用于应该包含数值的输入域,
您还能够设定对所接受的数字的限定.

4.<input type="range" name="points" min="1" max="10" />
range 类型显示为滑动条。
max number 规定允许的最大值 
min number 规定允许的最小值 
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） 
value number 规定默认值 

5.<input type="date" name="user_date" />
date - 选取日、月、年 
month - 选取月、年 
week - 选取周和年
time - 选取时间（小时和分钟）  
datetime - 选取时间、日、月、年（UTC 时间） 
datetime-local - 选取时间、日、月、年（本地时间）

二.HTML5 的新的表单属性

涉及 <form> 和 <input> 元素的新属性。

1.新的 form 属性：
    autocomplete 
    novalidate 
    新的 input 属性：
    autocomplete 
    autofocus 
    form 
    form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) 
    height 和 width 
    list 
    min, max 和 step 
    multiple 
    pattern (regexp) 
    placeholder 
    required 

2.autocomplete 属性
    autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
    autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

3.autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
autofocus 属性适用于所有 <input> 标签的类型。