html介绍和CSS控制页面

请结合前面的总述观看，后续内容持续开发。

注意：HTML 编码格式和解码格式要一致。

标签分类:块级元素和行内元素。
行内元素：对应标签内容仅在一行中 <span> <img> <video>
块级元素：块元素独占一行 <h1> <p>

关键标签： <div>
<video> 展示视频标签

<!DOCTYPE html> <!--html声明-->
<!--html标签-->
<!--html标签大多数是成对出现的 分为头标签和尾标签-->
<!--html根标签-->
<html><head><!--单标签--><!--告诉浏览器，需要使用UTF-8字符集解析该文件   语义化标签--><meta charset="utf-8"><title>优雅永不过时</title></head><body><!--标题标签h1-h6--><h1>这是一个优雅的网页！</h1><h2>这是一个优雅的网页！</h2><h3>这是一个优雅的网页！</h3><h4>这是一个优雅的网页！</h4><h5>这是一个优雅的网页！</h5><h6>这是一个优雅的网页！</h6><!--图片标签 图片地址src属性指定--><!--本地地址--><img src="F:\Mobile development\material\123.png"> </img><!--网页地址-->   <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Zxtf2X2EddV-g7hKyBhilAHaQB?pid=ImgDet&rs=1"> </img><!--行内元素不会独占一行  块元素独占一行--><span>我是地球人</span>><span>我是地球人</span>><h1>物联网实训3班</h1><h1>物联网实训3班</h1><p>我才是大哥</p><p>好的，你才是大哥</p><!--src=图片所在位置 alt=规定在图像无法显示时的替代文本--><img src="F:\Mobile development\material\123.png" alt="没看到图片"><!-- 设置一个高100px 宽100px 边框1px边框颜色为红色的DIV--><div style="height: 100px;width: 100px; border: 1px red solid"> </div><div style="height: 100px;width: 100px; border: 1px green solid"> </div><!--controls 控制选项  实现视频暂停 再播放等效果 --><video src="F:\Mobile development\material\video\3.mp4" controls> </video></body>
</html>

1、了解CSS是什么?用来于干嘛的?
       CSS指的是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言,是描述标记语言页面格式的标准。CSS使开发人员能够分离内容和可视元素，以实现更好的页面控制和灵活性。
       层叠:层叠指的就是样式的优先级，当产生冲突时以优先级高的为准。
       作用:用来美化咱们的网页的。
2、掌握CSS的语法结构
       选择符（Selector）、属性（property）、和值（value）
3、掌握CSS的引入方式
       行内样式
       内部样式
       外部样式
4、掌握基础选择器的使用
       元素选择器
       Id选择器
       Class选择器
       通配符选择器
5、了解复合选择器
       后代选择器
       父子选择器

引入方式：以下例子中三种方式不可以同时使用，不然会有小bug。（请勿直接复制，仅当做例子）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 第二种-->><style>p{font-size: 50px;color: green;}</style><!-- 引入css文件 第三种需要-->><link rel="stylesheet" href="style.css">
</head>
<body><!--CSS三种引入方式        第一种：行内样式  直接在标签中写样式 style="" font_size=字体大小  多个样式同时作用时，通过；分割第二种：内部样式  在当前html文件中写样式，样式位置在style标签中写  一般情况下放在head中 第三种：外部样式  样式的内容会单独写在一个外部文件中，通过引入的方式对元素起作用。--><!-- 第一种-->><p style="font-size: 100px; color: red;"> 第一种</p><p> 第二种  </p>
</body>
</html>

基础选择器：（四种基础选择器不要一起使用）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 元素选择器 */p{font-size: 20px;color: red;}/* id选择器 #==id  id值不能重复*/#red{font-size: 20px;color: red;}/* 类选择器 .==class id选择器只能选择其中一个类选择器可以选择多个元素当元素中有多个class属性值，通过空格分隔当多个选择器同时作用于同一个元素时，最后出现的样式会覆盖之前的样式*/.yellow{font-size: 20px;color: yellowgreen;}.abc{color: red;}/* 通配选择器   所有字符 */*{font-size: 20px;color: yellowgreen; }</style>
</head>
<body><h1>回乡偶书</h1><p>少小离家老大回，</p><p id="red">乡音无改鬓毛衰，</p><p class="yellow abc">儿童相见不相识</p><p class="yellow">笑问客从何处来</p>
</body>
</html>

后代选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/*后代选择器  只要是后代全部选择*/.nav li{color: blue;}/*子元素选择器  只包含子元素*/.nev li{color: red;}</style>
</head>
<body><ul class="nav"><li>一级标签<ul><li><span>2222<span>111</span></span></li><li>二级标签</li><li>三级标签</li></ul></li></ul></body>
</html>

子元素选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box>p{color: red;}</style>
</head>
<body><div id="box"><div><p>段落1</p><div><p>段落2</p></div></div><p>段落3</p><p>段落4</p><p>段落5</p></div>
</body>
</html>

CSS文本、颜色等常用样式

1、掌握CSS常用字体属性、字体图标的使用
       font-family:指定字体类型
       font- size:指定文本的字体大小
       font-style;指定文本的字体样式
       font-weight: 指定文本的字体粗细
       font可以在一个声明中设置所有的字体属性用空格分隔
           font: font-style / font-weight / font-size / font-family;
           1.必须按照上面书写的顺序书写，不能更涣顺序，并且各个属性之间用空格隔开。
           2.必须保留font-size和font-family属性，否则font不生效

       iconfont：字体图标。

2、掌握CSS常用文本属性的使用
       clor设置文本颜色
       text-align:对齐元素中的文本
       text-decoration:向文本添加修饰
       line-height:设置行高

3、掌握CSS背景、宽15、透明度等常用的属性
       width:元素的宽度
       height:元素的高度
       background:背景颜色
       opacit:元素透明度 0完全透明。
       overflow:指定如果内容溢出一个元素的框,会发生什么。 hidden溢出部分看不见 auto 溢出部分自动滑动
4、使用W3Cshoo手册查询属性

字体属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*font-family:指定字体类型font-size:指定文本的字体大小font-style;指定文本的字体样式font-weight: 指定文本的字体粗细font在一个声明中设置所有的字体属性*/span{font-family:'Courier New', Courier, monospace;font-size: 50px;font-style: italic;font-weight: bolder;}</style>
</head>
<body><span> 我是一个漂亮的span</span>
</body>
</html>

字体图标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="font/iconfont.css"><style>.iconfont{font-size: 100px;color: pink;}</style>
</head>
<body><!-- <i class="iconfont 图标名字"> </i> -->
</body>
</html>

文本属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 1.color：文本颜色*/div{color: #ff6eb4;}/* 2.text-align：文本对齐*/h1{text-align: center;}/* 3.text-decoration：装饰文本*/p{/* text-decoration: underline;text-decoration: line-through; */text-decoration: overline;}.frist{line-height: 56px;background-color: skyblue;}.jump{text-decoration: none;}</style>
</head>
<body><div>我是div的内容</div><h1>居中对齐</h1><p>装饰文本</p><div class="frist">文本对齐</div><a class="jump" href="www.baidu.com">百度一下你就知道</a>
</body>
</html>

其他样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- opacity 透明度--><style>div{width: 100px;height: 100px;background-color: aqua;opacity: 0.4;  overflow: auto;}</style>
</head>
<body><div>CSS指的是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言
,是描述标记语言页面格式的标准。CSS使开发人员能够分离内容和可视元素，以实现更好的页
面控制和灵活性。</div>
</body>
</html>

html介绍和CSS控制页面相关推荐

译-使用Scroll Snapping实现CSS控制页面滚动
特别声明,本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文,受限于译者能力,译文或存在不足,欢迎大家指出.如需转 ...
css控制页面打印（分页、屏蔽不需要打印的对象）
样式: <style media="print"> .Noprint { DISPLAY: none;} .PageNext { ...
css控制页面文字不能被选中user-select:none;
现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中. 原因:鼠标点快了文字会被选中. 解决方案:不同的浏览 ...
页面文字请使用css进行控制,css控制页面文字不能被选中user-select:none;
CentOS 7 配置静态IP 1.查看MAC地址 2.修改/etc/sysconfig/network-scripts/ifcfg-[第一步中红框内的文字] 3.添加和修改内容如下: 4.修改/et ...
html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考. 按比例缩小或者放大到某个尺寸,对于标准 ...
网页编程html link,Web--CSS控制页面（link与import方式区别）详解
先了解: [1] "Table"和"DIV"这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面 ...
css控制边界与边框示例(内边距、外边距使用方法)
这篇文章主要介绍了css控制边界与边框示例,需要的朋友可以参考下一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比元件下端边线的空隙 p ...
html裁剪字体代码,CSS控制文字换行、裁剪
关于换行.裁剪的一些CSS属性 word-wrap: normal | break-word normal 正常换行,内容可以撑破容器,例如长单词或者长数字的情况 break-word 以单词作为换行 ...
个人简介 - HTML/CSS简单页面实例
用 div + css 控制页面 1.position属性: absolute(绝对定位):参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位. 在没有设定 ...

html介绍和CSS控制页面

html介绍和CSS控制页面相关推荐

最新文章

热门文章