day5HTML新增css样式表选择器背景属性

最新推荐文章于 2024-03-14 13:04:26 发布
最新推荐文章于 2024-03-14 13:04:26 发布
阅读量227 收藏 1
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44650190/article/details/119859333
版权

HTML5新增的type属性

1.email
定义用于e-mail地址的字段（当提交表单时会自动对email字段的值进行验证）
<input type="email" name="usremail"> 必须包含@，@后面必须有内容
2.网址：
<input type="url"> 必须包含一个协议，协议后面必须有内容
3.搜索:
<input type="search">
4.颜色:
<input type="color">
5.电话：
<input type="tel">
6.数字：
<input type="number" max="5" min="-5" step="5">
7.范围：（滑块）
<input type="range" max="100" min="0" step="10">
8.日期；
<input type="date">
9. 周：
<input type="week">
10.月份：
<input type="month">

HTML5新增属性

1.placeholder=""默认提示
2.autofocus 自动获取焦点，推荐写在第一个表单元素上面
3.required 必须填写的 不能为空
4.最小长度 minlength="数字"
5.最大长度 maxlength="数字"
6.multiple  可以输入多个，用英文的逗号隔开
eg：输入多个邮箱<input type="email" multiple>
7.min和max 最小值和最大值，配合数字和范围使用
8.step 步长，配合数字和范围使用，可以取任意值

div和span

div  块级容器
span   行内元素

注意：块级元素可以包含块级元素和行内元素 行内元素一般不要包含块级元素

视频

Video标签定义视频，比如电影片段或者其他视频流
1）标签
<video src="">您的浏览器不支持视频</video> 行内元素   （双标签中的字正常不显示 它就是个提示）
2）支持的格式
.mp4  .ogg(移动端)   .webM(高清)
3）属性
src  路径 必须有
width  视频的宽度
height  视频的高度
poster="" 视频播放前显示一张图片   poster：海报
（以下属性都=属性值）
autoplay：自动播放   注意：谷歌浏览器不支持自动播放
controls:显示控制面板
loop: 循环播放
muted: 静音

音频

1）标签
<audio>您的浏览器不支持音频</audio> （双标签中的字正常不显示 它就是个提示）
行内元素
2）支持格式
.mp3  .ogg  .wav
3)属性
src  路径 必须有
（以下属性都=属性值）
autoplay：自动播放   注意：谷歌浏览器不支持自动播放
controls:显示控制面板
loop: 循环播放
muted: 静音

source

source
1）作用
给浏览器提供多种视频或者音频格式的选择
2）标签
<source>  单标记
3）语法
<video autoplay>
    <source src="啦啦啦.mp4">
    <source src="啦啦啦.ogg">
    <source src="啦啦啦.webm">
    您的浏览器不支持视频
</video>

CSS

  • 1.css定义

css (Cascading Style Sheets)层叠样式表，又叫级联样式表，简称样式表

用于HTML文档中元素样式的定义

  • 2.css的作用

1）实现了将内容与表现分离

 内容：HTML

 表现:css

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

  • 3.css文件后缀

.css

  • 4.语法

css规则由两个主要部分构成：选择器，以及一条或多条声明

选择器通常是指需要改变样式的HTML元素。每一条声明由一个属性和一个值组成。

属性：属性值；属性是希望设置的样式属性。每一个属性有一个值。属性和值被冒号分开。

css声明总是以分号；结束，声明总以大括号{}括起来

比如：h1  {color:blue;font-size:12px;}

h1是选择器  {}内由分号隔开的是声明，color:blue;是一条声明。color是属性   blue是属性值 font-size是属性  12px是属性值

比较：

css:属性：属性值；

html:属性=“属性值”


 

  • 5:css注释

css注释以"/*"开始 以”*/“结束

CSS样式

  • 1.内联样式 （行内样式）

 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，需谨慎使用此种方法，例如当样式仅仅需要在一个元素上应用一次时

 使用内联样式，需要在相关的标签里使用样式（style）属性，style属性可以包含任何CSS样式

 

  • 2.内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表，你可以使用<style>标签在文档的头部定义内部样式表

直接把css代码添加到头部的style标签中

特点：单个页面内的css代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head>

    <style>

        h1{background: gold}

    </style>

</>head>

  • 3.外部样式(推荐)

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观，每个页面使用<link>

标签链接到样式表。<link>标签在文档的头部：

<link rel="stylesheet" type="text/css"href="xxx.css">

stylesheet的意思是样式调用  href=""  ""内是引入的样式的路径即css文件的路径，即css文件的名称

注：外联是指创造一个css文件，里面写标签 在<head>标签里面用<link>标签引入css文件。

  • 4.导入式（了解）

<style type="text/css">

    @import url(css文件路径);

</style>

  • 优先级

一般情况下（外部样式在内部样式前），优先级如下 ：

内联样式>内部样式>外部样式>浏览器默认样式

但是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式

优先级逐级增加的选择器列表：

通用选择器;元素选择器;类选择器;属性选择器;伪类;ID选择器;内联样式

!important规则除外，当!important规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他声明。

所以不建议使用

  • 权值计算：

内联样式表：1000; ID选择器：100;类选择器：10;HTML标签选择器：1

CSS基础选择器

选择器通常是指需要改变样式的HTML元素

  • 1.id选择器    //id具有唯一性

  id选择器可以为标有特定id的HTML元素指定特定的样式

  HTML元素以id属性来设置id选择器，CSS中的id选择器以"#"来定义。

  语法：#idName {

            color: tomato;//声明；

        }

  注意：ID属性不要以数字开头，数字开头的ID在MOzilla/Firefox浏览器中不起作用 类选择器也是一样

  • 2.类选择器

类选择器用于描述一组元素的样式，class选择器 有别于id选择器，class可以在多个元素中使用。

class选择器在HTML中以class属性表示，在css中，类选择器以一个点"."号显示

语法：.className{

            color: cyan;

}

范围：所有有class属性 且属性值等于className的元素

类名可以重复,同时一个class可以起多个名字，用空格隔开

比如：class="第一个名字 第二个名字"

eg: <p class="p1 p2">段落1</p>

  • 3.元素选择器

语法:

        div {

            color: chartreuse;

        }

范围：选中所有指定的元素

  • 4.全局选择器  通用选择器

语法：

        * {

            color: brown;

        }

范围：选中页面所有的元素

  • 5.合并选择器

可以减少代码，每个选择器用逗号隔开

语法：选择器1，选择器2，...{

          共同样式

          }

选择器1和选择器2可以不同

  • 6.嵌套选择器

适用于选择器内部的选择器的样式。

eg：div{}:为所有的div元素指定一个样式

    .d1{}:为所有的class="d1"的元素指定一个样式。

    .d1 div{}:为所有的class="d1"元素内的div元素指定一个样式。

    div.d1{}:为所有的class="d1"的div元素指定一个样式。

注意：命名规范：1：可以包含数字，字母，- 2：不能以数字开头 3：建议起有意义的名字

CSS关系选择器

  • 1.后代选择器

定义：选择所有被E元素包含的F元素，中间用空格隔开

语法：E F{} 也就是选择器1 选择器2{}

选中所有后代

  • 2.子代选择器

定义：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

语法：E>F{} 也就是选择器1>选择器2{}

选中所有直接子代

  • 3.相邻兄弟选择器

定义：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素

语法：E+F{} 也就是选择器1+选择器2{}

注意：平级 挨着 后面的一个兄弟

4.通用兄弟选择器

定义：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开（平级  后面的所有兄弟）

语法：E~F{} 也就是~选择器2{}

注意：这些关系选择器一般情况下的运用是

第一个选择器是类选择器 第二个选择器是元素选择器

属性选择器

具有特定属性的HTML元素样式

具有特定属性的HTML元素样式不仅仅是class和id

  • 1.[属性]  选中有该属性的所有元素

eg:[class] {

            color: springgreen;

        }

  • 2.[属性=属性值]

eg:[class="box"] {

            color: violet;

        }

  • 3.元素[属性=属性值]

eg: div[class="box"] {

            color: royalblue;

        }

  • 4.元素[属性~=属性值]   

根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）

如果忽略了波浪号，则说明需要完成完全值匹配

eg：div[class~="box"]{

    color:red;

}

  • 5.元素[属性^=值]       选择 abc 属性值以 "def" 开头的所有元素

eg：div[abc^="def"] {

            color: red;

        }

  • 6.元素[属性$=值]  选中以这个值结尾的这种元素

eg:div[abc$="def"] {     选择 abc 属性值以 "def" 结尾的所有元素

            color: red;

        }

  • 7.元素[属性*=值]       选择 abc 属性值中包含子串 "def" 的所有元素

eg:a[href*="w3school.com.cn"] {

    color: red;

}

伪类：用来添加一些选择器的特殊效果

  • 伪类选择器    :链接，表示一种状态

同一个标签，根据其不同的种状态，有不同的样式。这就叫做"伪类"。伪类用冒号

来表示。

1.:link "链接"：超链接点击之前（只使用于a）

2.:visited "访问过的"：链接被访问过之后（只适用于a）

3.:hover "悬停"：鼠标放到标签上的时候（适用于所有标签）

4.:active "激活"：鼠标点击标签，但是不松手时。（适用于所有标签）

注意：注意：顺序：先爱后恨  l-v-h-a(不然可能不生效 点击之前的颜色不生效的话 

需要清理浏览器的缓存)

  • css新增的伪类

:first-child    第一个子元素是...（要求:的元素是第一个 不是第一个的话不生效）

:last-child   最后一个子元素是...（要求:前的元素是最后一个 不是最后一个的话不生效）

:nth-child(number/even/odd/倍数)  第几个子元素是...

（要求:前的元素是第几个 不是第几个的话不生效）

even:偶数

odd:奇数

倍数表示：2n  3n

eg：当<div class="box">

        <h>hahaha</h>

        <div>1</div>

        <div>2</div>

    </div>

时.box>div:first-child {

            color: tomato;

        }不生效

(也就是说 并不只是单纯的选中第一个div 而是要求第一个子元素得是div,也就是div:first-child生效的话 表示的是div是子类的第一个元素 )

:only-child  唯一一个子元素是...

:empty  空的子元素（元素之间任何内容都没有）

eg:<div></div>   中间什么都不能有 空格都不可以

:not  否定掉 除了这个...

:focus  获取焦点时的样式（点击）

:checked  默认被选中时的样式（配合单选按钮和多选按钮）

背景

1.背景颜色
background-color：属性值；默认值是transparent 透明的
颜色的取值：
1)十六进制  #000  #fff
2)关键字   red  blue 
3）rgb(0,0,0)
2)rgba(0,0,0,.5)   a:透明度，取值0-1

2.背景图片
background-imags:url("路径");
默认水平垂直平铺
注意：img元素和背景图片的区别
img元素：父元素放不下会溢出
背景图片：父元素多大，显示多大
背景图片是css的样式 图片是元素 背景图片和图片不同  不会把容器撑开 

3.背景图片是否平铺
background-repeat：属性值；默认值是repeat（平铺）
属性值还有no-repeat(不平铺) repeat-x（水平方向平铺）repeat-y(垂直方向平铺)

4.背景图片大小
background-size：；取值x y; x y取值px  %  cover  contain
cover：覆盖整个背景区域， 背景图片可能显示不完全
contain：背景图片拉伸至足够大，但是背景区域可能覆盖不完全

5.背景图片定位
background-position:x y;
默认在左上角 0 0
取值px 100% left right bottom center
当只取一个值时，第二个值默认居中
注意：取正直，背景图片往右下走，取负值，背景图片往左上走

6.背景图片固定
background-attachment:; 默认是scroll(跟着页面动而动)
取值为fixed的时候 固定

7.简写
background：颜色 图片 平铺 大小 定位 固定;
当简写属性和单个属性同时存在，单个属性要写在简写属性的下面
因为如果放在上面 下面简写如果没有给他取值 那么就是默认值 
而不是根据上面的确定 
eg: background-size: 100%;
    background: red url("../images/2.jpg") no-repeat;
    此时图片大小的100%就不生效了 因为下面有简写 简写没有的属性值取默认值
小承诺·
关注
DOM - 节点选择器和属性选择器
Jared864的博客
05-12 1434
Day21 一、DOM 介绍 概念：DOM（document of module）、 DOM不属于BOM window对象身上有提供document对象 DOM主要控制页面（html文件），所有的页面操作都需要通过DOM DOM的结构，html结构：属性结构，包含结构，家族结构（父子级，兄弟级） html根元素：head，body DOM树形结构的每个组成部分，都叫节点。所有节点，都是对象 选择器 元素节点选择器（只有元素节点） 直接选择器 id选择器：document.getELe
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4778
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
html5日期样式,HTML5的日期选择器有什么选择吗？
weixin_39639965的博客
07-16 141
Currently, there is no cross browser, script-free way of styling a native date picker.As for what's going on inside WHATWG/W3C...If this functionality does emerge, it will likely be under the CSS-UI s...
【基于HTML5的网页设计及应用】——改变文字和背景颜色
最新发布
shsjssnn的博客
03-14 1099
【基于HTML5的网页设计及应用】——改变文字和背景颜色
点击选中当前按钮，加class类名（改变背景颜色字体-active的运用）
gyueh的博客
12-17 3262
目的：当页面存在多个标签按钮时，点击选中当前按钮时，当前按钮的背景色及字体颜色发生改变。 效果如图： xmL部分代码如下： <view class="optional_title">{{optional_title}}</view> <!-- 标签部分 --> <view class="optional_tags"> <bu...
使用className修改样式属性
2302_76195408的博客
01-29 1025
className会直接更改元素的类名，会覆盖原先的类名，也就是说如果我们的div原来是有一个类名的话，使用className也会直接会给你改成现在的类名也就是我们上面代码里的change，换言之，className里面赋的值会直接覆盖掉以前div的类名.这样就可以得到和刚才使用element.style行内样式修改一模一样的效果，但是使用element.className更加方便简洁，尤其是在面对更多样式更复杂的情况下的使用.先把想修改的样式写在css里面，这里我们给一个新的类名就叫它change吧。
javascript 之 className属性
weixin_30888027的博客
12-11 142
　　Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。 　　1、用className 属性修改节点的css类别 　　代码如下： 1 <html> 2 <head> 3 <title>追加CSS类别</title> 4 <style type="text/...
HTML5CSS3_day01.md
01-15
- CSS3是层叠样式表（Cascading Style Sheets）的第三版，扩展了CSS2的功能，增加了更多的样式控制选项。 - 发展现状：移动端支持优于PC端，尽管目前仍处于草案阶段，但应用非常广泛。 - **属性选择器**： - 允许...
pc网页html css基础
03-10
内联样式（`style`属性）、内部样式表（`<style>`标签）和外部样式表按优先级从高到低排列。 4. **盒模型**：CSS的盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。元素的总宽度...
html5 css4 JavaScript 语法
m0_46881781的博客
05-06 1064
1.html5 1.环境搭建 1）编辑器环境 轻量级的编辑 sublime(装emmet插件) vscode（在用） 2）浏览器环境（测试） firefox google chrome opera safari(mac) ie8+(兼容性) 2.编写简单的hello world 编写代码 -> 运行测试 -> 交付(部署到服务器)【网站】 1）部署在tomcat中 (动态服务器 -...
（2020-09-25）一起学习css3
Missjuzi的博客
09-25 426
归纳： CSS 的概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一。 CSS 解决了什么问题? HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是
中软Day03——CSS基础（样式、选择器、标签类型）
qq_43542290的博客
09-24 955
中软Day03 认识css css的发展历程 随着html的发展，为了满足前端工程的需求，css应运而生 网页美容师——css 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。 如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师 没有不好看的网页，只有不会CSS的前端。 css初识 CSS通常称为CSS样式表或层叠样式表（级联...
【Web应用开发】实验三：利用CSS设置网页内容样式
msmxsd的博客
02-26 2512
实验目的 了解CSS的基本含义及其基本用法； 掌握CSS样式应用的四种方法：行内样式、内嵌式、链接式、导入式； 了解CSS选择器的概念、分类； 掌握基础选择器和复合选择器的使用； 了解CSS 颜色设置的多种方法； 掌握CSS背景颜色和背景图片的设置方法； 掌握文字段落设置，如：文字的颜色和缩进、文字行高与文本对齐、词与字母的空白、单词大小写、文本空格处理、字体设置等； 掌握CSS中列表样式和表格样式的设置。 实验内容 利用html构造一个新闻网页，设置标题、来源信息、段落等基本部分。 利用CS
实现五彩标题，即每个span设置的字呈现不同的颜色
qq_51730402的博客
11-02 4191
实现五彩标题，即每个span设置的字呈现不同的颜色
活动1:采用css样式来设置背景、标题和段落的颜色。_数据分析师所需的编程技能 : CSS篇...
weixin_42519253的博客
01-25 4193
Html篇里提到过css是啥，CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。1、一个CSS样式示例：CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。例子：从代码可以看到，我在结构里定义了一个名字...
第二章CSS基础
lcj18258132887的博客
09-06 662
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 2.1CSS的由来以及体现的作用 样式解决了一个普遍的问题 HT
element-ui 修改 默认的一些样式
贵林之恋的博客
04-21 2519
variables.scss 文件： /** * @description 全局主题变量配置，VIP文档内提供多种好看的配色方案（ant-design风格、layui风格、iview风格），请查看VIP文档主题配置篇 */ /* stylelint-disable */ @charset "utf-8"; $theme-color: #3370ff; // 主内容区最小宽度 $base-content-min-width: 1200px; //框架默认主题色 $base-color-default:
CSS教程(四)如何在网页中插入CSS
11-08 1555
  CSS教程(四)如何在网页中插入CSS 前两章我们了解了CSS的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。　　链入外部样式表链入外部样式表是把样式表保存为一个样式表文件，然后在页面中?lt;link>标记链接到这个样式表文件，这个标记必须放到页面
h5好用的日期选择器_详解:5种CSS选择器的结合使用
weixin_33675283的博客
11-29 1276
1、元素选择器2、类选择器3、ID选择器4、属性选择器5、派生选择器1、元素选择器最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。用法十分简单，例如：以下css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。1 html {backgroun...
CSS基础：样式表分类与选择器详解
“YK-Day04笔记.pdf”涵盖了CSS基础知识，包括CSS的定义、分类（内联样式、内部样式和外部样式）以及常用选择器的介绍。 CSS（层叠样式表）是用于美化和控制HTML网页外观的重要工具。它允许开发者通过定义不同的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值