2-31 HTML2&CSS

于 2022-10-26 22:44:35 发布
阅读量169 收藏 1
点赞数
分类专栏： Note 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WilsonDone/article/details/127542494
版权

CSS&HTML

from表单

请添加图片描述

实现注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<form action="" method="get">
    <table align="center">
        <!--
        caption 标签 定义表格标标题
        必须紧随着table后面，如果需要对每一个表格都需要定义一个标题
        通常和这个表格会被用于表格之上
         -->
        <caption>
          <h2>注册</h2>
        </caption>
        <tr>
            <td align="left">用户名：</td>
            <td><input type="text" name="username" value="bluesky"></td>
        </tr>
        <tr>
            <td align="left">密码：</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td align="left">确认密码：</td>
            <td><input type="password" name="ps"></td>
        </tr>
        <tr>
            <td align="left">性别：</td>
            <td><input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女" checked>女</td>
        </tr>
        <tr>
            <td align="left">爱好：</td>
            <td>
                <input type="checkbox" name=hobby value="蓝球" checked>蓝球
                <input type="checkbox" name=hobby value="足球" >足球
                <input type="checkbox" name=hobby value="乒乓球" >乒乓球
                <input type="checkbox" name=hobby value="羽毛球" >羽毛球
            </td>
        </tr>
        <tr>
            <td align="left">上传头像：</td>
            <td>
               <input type="file" name="upload">
            </td>
        </tr>
        <tr>
            <td align="left">居住地：</td>
            <td>
               <select name="city">
                   <option value="北京">北京</option>
                   <option value="上海" selected>上海</option>
                   <option value="广州">广州</option>
                   <option value="沈阳">沈阳</option>
               </select>
            </td>
        </tr>
        <tr>
            <td align="left">个人介绍：</td>
            <td>
            <textarea cols="100" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td align="center">
               <input type="submit" value="注册"/>
                <input type="reset" value="重置"/>
            </td>
        </tr>
    </table>

</form>

</body>
</html>

表单提交

form表单中一个重要的属性 action
<!--action : 表示动作，指向服务器地址，把表中的数据提交到该地址上进行处理-->
修改表单中的action中的位置
<form action="loaclhost:8080" method="get">
    地址栏中：
http://指定地址?会将页面中所有注册信息拼接到这个地址栏的位置
  地址后面和第一个参数的位置使用?连接 
   后续参数使用&符号链接
例如： http://localhost:8080?username=bluesky&password=123456......    
PS:get请求对数据长度有要求（尽量限制在100个字符内，超过的部分不会传输到服务器）
    
<form action="loaclhost:8080" method="post">  
      地址栏中：http://指定地址
    例如： http://localhost:8080
 PS:后续学习中这个路径基本上就是servlet的路径

HTML框架标签【理解】

通过使用框架标签，你可以在同一个浏览器窗口中显示不一个页面，每个HTML文档称为一个框架，并且每个框架都是独立于其他框架

使用框架的缺点：

​ 开发人员必须同时跟中多个HTML文档

​ 很难打印整张页面

frameset标签

框架结构标签，把boby删出，使用frameset替代boby

框架标签分隔窗口-》每个frameset定义了一系列【行和列】 属性 rows / cols值规定了每行和每列占据屏幕的面子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>frameset标签</title>
</head>
<!--演示1 上下分隔的效果  *代表剩下所有的部分-->
<!--
<frameset rows="20%,*">
    上面展示的20%的内容
    <frame name = "frame1" src="top.html">
    下面展示80%的内容
    <frame name = "frame2" src="bottom.html">
</frameset>
-->
<!--演示2 左右分隔的效果  *代表剩下所有的部分-->

<frameset cols="20%,*">
    <!--上面展示的20%的内容-->
    <frame name = "frame1" src="top.html">
    <!--下面展示80%的内容-->
    <frame name = "frame2" src="bottom.html">
</frameset>


</html>

frame标签

frame标签主要是定义在框架内部的HTML文档

注意事项：
1.不能将<body>标签不能与<frameset>标签一起使用
    body是一个整体 frameset是一个分隔
    
2.加入一个框架可见边框，用户可以拖动边框改变框架大小
  避免这个情况发生 可以在frame标签中 添加  noreszie="noreszie"  

3.frameset中 属性 frameborder = "1|0|yes|no" 表示是都有边框 数字是边框粗细 bordercolor 边框颜色

请添加图片描述

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#00bfff">
<h1>正文内容</h1>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="red">
 <h1> HTML的框架标签</h1>
</body>
</html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#f4a460">
<a href="http://www.qfedu.com">千锋官网</a>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>frameset标签</title>
</head>
<!--<frameset rows="200,*" border="10px" bordercolor="yellow">-->
<!--      &lt;!&ndash;scrolling 主要有三个值 yes 显示滚动条  no 不显示 auto 如果内容超过屏幕直接显示滚动&ndash;&gt;-->
<!--      <frame src="top.html" scrolling="yes" noresize="noresize">-->
<!--      <frameset cols=" 200,*">-->
<!--          <frame src="left.html" scrolling="yes" noresize="noresize">-->
<!--          <frame src="right.html" scrolling="yes" noresize="noresize">-->
<!--      </frameset>-->
 <!--在HTML5中frameset和frame已经过时了，HTML中建议使用div+iframe来达到这个效果-->
    <div>
        <div>
            <iframe src="top.html" frameborder="1" scrolling="yes"
                    height="150px" width="99.8%" onresize="onresize" align="top"></iframe>
        </div>
    </div>

</frameset>
</html>

其他标签

meta 描述网页
描述网页关键字  
<meta name ="keywords" content = "keyword1,keyword1">
网页描述
<meta name ="description" content = "this is my page">
网页编码
<meta http-equiv="content-type" content = "text/html;charset=UTF-8">
页面自动跳转【时间限制】                秒     路径
<meta http-equiv="refresh" content = "2;URL=https://www.baidu.com">
页面编码
<meta chaser="UTF-8">

使用link标签引用css文件
<link rel ="stylesheet" type="text/css" herf="./styles.css">
<script type="text/javascript" src=""></script>

ps:这些标签多用于在head标签中

符号标签

请添加图片描述

&lt; 小于号  &gt; 大于  &amp; 与字符  &quot; 引号  &reg; 已注册 &copy; 版权 &trade;商标 
&nbsp; 空格

CSS

CSS：层叠样式表是一种用来表现HTML或XML等文件样式计算机语言，CSS不仅可以修饰静态网页，还可以配合各种脚本语言动态对网页元素进行格式化

需要注意：多个样式可以层层覆盖叠加，如果不同css样式对应同一个html标签进行修饰，样式会有冲突，应用优先级高的，不冲突的样式规则来进行修饰

CSS作用：

1.修饰美化html页面

2.外部样式可以用过代码的形式内嵌到页面以提高效率

3.html内容和样式表现分离，便于后期维护

css特点

1 丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2 易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分**，也可以将样式声明在一个专门的CSS文 件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

3 多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4 层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

5 页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间

CSS语言规则

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

请添加图片描述

说明：

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

2.每条生成由一个属性和一个值组成【相当于使用什么样式来修饰HTML标签】

css书写方式有两种：

1、选择器、每个声明各占一行【使用单独的CSS文件或者在head声明】

h1{
color：red;
font-size：14px
}

2.选择器声明都都在一起【多于直接在标签后面直接修饰】

<div style="border: 1px"> </div>

注意事项：

1.如果值为若干个单词，则要给值添加双引号

font-family:"黑体","华文彩云","微软雅黑","arial"
依次获取每个字体样式，如果第一个没有找第二个依次类推....

2.多个声明之间使用【;】分开【使用单独的CSS文件或者在head声明】

3.css对打下写不敏感。如果涉及到与HTML文档一起使用，class与id名称大小写敏感

4.css的注释 /**/

CSS的使用方式

1.内联方式

把css样式 嵌入到HTML标签中， 类似于HTML标签中属性的用法
需求：
   分别定义两个 div,span 标签，分别修改每个div标签样式：边框1px 实线  红色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS修还标签内联方式</title>
</head>
<body>
    <!--需要使用css样式修饰标签【内联】，需要使用到标签一个属性 style主要就是使用CSS样式-->
    <!--solid实线-->
    <!--每个属性逐句一个一个写，使用【;】分隔不同属性-->
     <div style="border-width: 1px;border-style: solid;border-color: red">div 标签1</div>
    <!--在CSS3.0之后版本中结合HTML提供了简化写法-->
    <!--每个属性值之间使用【空格】分隔【;】作为属性值的结尾-->
    <div style="border: 1px solid green;">div 标签2</div>
<div>
    <span style="border: 1px solid yellow;">span标签 1</span>
    <span style="border: 1px solid yellow;">span标签 2</span>
</div>
</body>
</html>
总结：
    好处: 可以单独设置某个【HTML标签】元素的样式
    缺点:
         1.如果标签多了，样式多了，代码很多庞大
		 2.可读性非常差
         3.CSS 样式代码没有什么可复用性

场景： 单独的标签，不是大量重复，简单展示的 可以使用内联

2.内部方式

将css引入到head标签的位置
<!--在head标签中使用style标签引用css样式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS修饰标签内部方式</title>
    <!--style 标签专门用来定义 css样式代码-->
    <style type="text/css">
        /*
        style type="text/css" 相当于告诉浏览器使用css语法语法去解析
         */
         /*
         就可以使用标准的CSS语法来实现 即 选择器{属性名：属性值；属性名：属性值....}
          */
        /*<!--在CSS3.0之后版本中结合HTML提供了简化写法-->*/
        /*<!--每个属性值之间使用【空格】分隔【;】作为属性值的结尾-->*/
        div{border:1px solid green; }
        /*<!--每个属性逐句一个一个写，使用【;】分隔不同属性-->*/
        span{border-width: 1px;border-style: solid;border-color: red}
    </style>
</head>
<body>
    <div>div 标签1</div>
    <div >div 标签2</div>
<div>
    <span>span标签 1</span>
    <span>span标签 2</span>
</div>
</body>
</html>

总结：
   好处：可以控制页面中多个元素的样式
   缺点:
       1.只能在用一个页面内复用代码，不能再多个页面中复用css代码
       2.维护起来不太方便，实际项目中会有成千上万个页面，要到每个页面中去修改，工作量太大
       3.修饰过于单一，即所有相同标签只能有这个一套CSS样式修饰
       即 选择器 选择的式div，以后所有div中都会使用到样式

3.外部方式

将CSS样式单独抽取成一个独立的文件，谁用谁就引用这个文件
好处在于:一处编写，多个页面都可以使用
创建一个单独的css文件在文件中添加内容
/*只需要将要修饰标签的样式写入这个文件中即可*/
div{border:1px solid green; }

在HTML页面中使用到这个css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS修饰标签内部方式</title>
     <!--    在head标签中两种连接方式-->
<!--    方式1 链接式-->
<!--      link标签，这个标签是专门用来引入CSS样式代码-->
<!--      三个属性 rel 代表当前页面与href所指定文档的关系-->
<!--              type 文件类型  告诉浏览器使用什么方式解析语法【text/css】以css语法解析-->
<!--              href 引用css文件的地址-->
    <link rel="stylesheet" type="text/css" href="div.css">
<!--    方式2 导入式-->
<!--      这个方式需要配合 style type="text/css" 在其内部使用@import url(css文件存在地址)-->
<!--     已经在文件中写了css样式代码可以使用导入式-->
    <!--style 标签专门用来定义 css样式代码-->
    <style type="text/css">
        @import url(div.css);
        /*<!--每个属性逐句一个一个写，使用【;】分隔不同属性-->*/
        span{border-width: 1px;border-style: solid;border-color: red}
    </style>
<!--    ps：link引入和@import引入区别-->
<!--       1.link所有浏览器都支持，@import某版本的IE不支持-->
<!--       2.@import是等待html文件加载成功之后在加载，link解析到这个语句就加载-->
<!--       3.@import语句不支持js动态修改-->
    
</head>
<body>
    <div>div 标签1</div>
    <div >div 标签2</div>
<div>
    <span>span标签 1</span>
    <span>span标签 2</span>
</div>
</body>
</html>

注意：CSS存在优先级问题

​ 优先级排序 内联样式>内部样式>外部样式 就近原则

​ 需要注意内部样式和外部样的位置

CSS选择器

因为现阶段选择器使用的式HTML的标签，所以会造车所有标签都会使用到这个样式，但是不是所有标签都需要的，就可以对选择器进行修改

1.基本选择器

样式：其实就是标签选择器
标签名{
     属性:值;
}
<!--标签选择器可以决定哪些标签【被动】使用这个样式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        div{border:1px solid green; }
        span{border-width: 1px;border-style: solid;border-color: red}
    </style>
</head>
<body>
    <div>div 标签1</div>
    <div >div 标签2</div>
<div>
    <span>span标签 1</span>
    <span>span标签 2</span>
</div>
</body>
</html>

2.id选择器

id选择器的格式

#id属性值{
    属性:值;
}
id选择器，可以让我们通过id属性选择性的使用这个样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        /*
          这种写法就是id选择器定义
         */
        #id001{border:1px solid green; }
        #id002{border-width: 1px;border-style: solid;border-color: red}
    </style>
</head>
<body>
<!--    在HTML页面中需要使用id选择器进行 标签修饰，只需要在标签中添加id属性即可-->
    <!--id属性值也可以使用“”方式来进行传递 即  id="id0002" -->
    <div id = id002>div 标签1</div>
    <div>div 标签2</div>
<div>
    <span id = id001>span标签 1</span>
    <span>span标签 2</span>
</div>
</body>
</html>

3.class选择器

Class类型选择器格式

.class属性值{
    属性:值;
}
class类型选择器，可以用过class属性有效的选择性的去使用这个样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class选择器</title>
    <style type="text/css">
        /*
          这种写法就是class选择器定义
         */  
        .class001{border:1px solid green; }
        .class002{border-width: 1px;border-style: solid;border-color: red}
    </style>
</head>
<body>
<!--    在HTML页面中需要使用class选择器进行 标签修饰，只需要在标签中添加class属性即可-->
    <div class="class001">div 标签1</div>
    <div>div 标签2</div>
<div>
    <span class="class002">span标签 1</span>
    <span>span标签 2</span>
</div>
</body>
</html>

id和Class区别

<!--1.语法区别：-->
 id对应css使用样式符号'#'
 class对应css使用样式符号'.'
<!--2.使用次数：-->
  id属性，只能被一个元素调用（以#选择符号命名CSS样式在一个页面只能使用一次），在同一个页面中，只可以被调用一次，在CSS；里面使用‘#’
 class属性，可以用于被多个元素调用（以.选择符号命名CSS样式在一个页面可以使用一次或多次），在同一个页面中可以调用无数次

ps：ID就像一个人身份证，  用ID修饰DIV这个DIV样式是唯一
    class就相当于是人身上的衣服  用Class修饰DIV证明这个页面中可以有多个DIV使用这个Class
ps：如果效果在这个页面中有且仅使用一次建议使用id，如果大量重复使用使用class

4.组合选择器

组合选择器语法：
 选择器1,选择器,选择器N{
    属性：值
}
组合选择器可以让多个选择器共用一个css样式代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class选择器</title>
    <style type="text/css">
        /*
          这种写法就是组合选择器定义
         */
        .class001,#id001{border:1px solid green; }
       
    </style>
</head>
<body>
<!--    在HTML页面中需要使用class选择器进行 标签修饰，只需要在标签中添加class属性即可-->
    <div class="class001">div 标签1</div>
    <div>div 标签2</div>
<div>
    <span id="id001">span标签 1</span>
    <span>span标签 2</span>
</div>
</body>
</html>

PS：介绍CSS的时候，说过CSS样式会出现【叠加状态】

不同样式会进行修改 --》 CSS提供一个名字【叠加】

相同样式不会进行修改 —》CSS提供一个名字【不叠假】

在使用选择器的时候 优先接 id > class > 标签

5.属性选择器

属性选择器格式
  html标签[属性='属性值']{
	属性:值;
  }
或者
  html标签[属性]{
	属性:值;
  }
它会根据元素【标签】属性以及属性值来选择元素【标签】
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        /*内部连接*/
        input[type]{
            background-color: pink;

        }
        input[type='password']{
            background-color: yellow;
        }

        a[href ^= 'www'] {/*a标签href属性的值是以www开头*/
            font-size: 200px;
        }
        a[href  $= 'com'] {/*a标签href属性的值是以com结尾*/
             color: darkgoldenrod;
        }
        a[href  *= 'jd'] {/*包含指定内容不在乎顺序*/
             font-family: 黑体;
         }
    </style>
</head>
<body>
<form name="login" action="#" method="get">
    <!--font标签已经过时了，在HTML5中建议使用当前CSS属性来修饰-->
<!--        <font size="3">用户名</font>-->
        用户名:<input type="text" name ="username" value="zhangsan"/><br/>
        密码:<input type="password" name ="password" value="123456"/><br/>
         <input type="submit" value="登录"/><br/>
    <a href = "www.jd.com">京东</a>


</form>

</body>
</html>

6.伪元素选择器

只要是针对a标签使用
语法：
静止状态   a:link{css属性}
悬浮状态   a:hover{css属性}
触发状态   a:active{css属性}
完成状态   a:visited{css属性}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        /*静止状态*/
        a:link{color:black;}
        /*悬浮状态*/
        a:hover{color:green;}
        /*触发状态*/
        a:active{color:yellow;}
        /*完成状态*/
        a:visited{color:blue;}
     
    </style>
</head>
<body>
    <a href = "#">京东</a>
</body>
</html>

7.层级选择器

出现标签嵌套的情况下可以使用这种方式对需要的标签进行样式修改
语法：
#id属性值【连接方式】标签{
    属性:值;
}
ps:连接方式 <!--【空格、>、+、~】-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <style type="text/css">
        /*后代选择器*/
        /*#div1 p{!*表示当前div中无论层级的p标签*!*/
        /*    color: red;*/
        /*}*/
        /*子代选择器*/
        /*#div1>p{!*表示当前div中第一层级p标签*!*/
        /*    color: pink;*/
        /*}*/
        /*相邻兄弟选择器*/
        /*表示当前div曾集中有何span标签相邻的p标签
          这个相邻是指在span标签之后，不能再span标签之前*/
        /*#span1+p{*/
        /*    color: blue;*/
        /*}*/
        /*通用兄弟选择器*/
        /*表示当前div层级中和span在用一个层级的div标签
         只要是在span标签之后div标签才可以满足条件*/
        #span1~div{
            color: green;
        }
    </style>

</head>
<body>
    <div id="div1">
        <span id="span1">第一层级div中的span</span>
        <p>第一层级div中p</p>
        <div>
            <p>第二层级div中p</p>
            <span>第二层级div中span</span>

            <div>
            <p>第三层级div中p</p>
            <span>第三层级div中span</span>
            </div>
        </div>

    </div>

</body>
</html>

总结

在使用CSS对HTML进行样式修饰的时候，我们可以选择的方式有

内联【在标签中进行修饰】

内部【在head标签中写css代码】

外部【写css文件加载到HTML（link标签和在css代码中使用@import导入）】

对当前CSS属性设置，提供了选择器可以操作

id、class【区别点在于一次和多次】 > 组合、标签、层级、属性 > 伪

CSS属性

1.文字和文本属性

1.1文字属性
<!--1.通用属性是【复合属性】font 接收所有对文字属性的修改， 设置属性的时候是顺序执行
   例如 font: italic bol 30px 
<font-style>： 指定文本字体样式 
<font-variant>： 指定文本是否为小型的大写字母 
<font-weight>： 指定文本字体的粗细 
<font-size>： 指定文本字体尺寸 
<line-height>： 指定文本字体的行高 
<font-family>： 指定文本使用某个字体或字体序列 
按照这个顺序赋值-->
<!--2.font-size设置文字大小 -->
<!--3.font-family设置文字字体 常见：黑体，宋体，楷体，微软雅黑等等-->
<!--4.font-style设置文字倾斜 normal 文字正常  italic 字体倾斜  oblique 文字倾斜【变形】
ps： 
   斜体：是对每个字母的结构进行改动在外观中进行反应
   倾斜： 文本是正常竖直的倾斜版本
   在web效果是一样的。
-->
<!--font-weight 设置字体的粗细
  值是9个等级  100~900之间   
  100等级是最细   900是最粗   400中间 normal   700相当于是粗体 bold-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体CSS属性</title>
    <style type = "text/css">
        #p1{
            color: red;
            font-size: 20px;
            font-family: 黑体;
            font-style: italic;
            font-weight: 900;
        }
        #p2{
            color: green;
            font: oblique 400 20px 楷体;
        }
    </style>
</head>
<body>
   <p id = "p1">床前明月光</p>
   <p id = "p2">嘻嘻(#^.^#)</p>

</body>
</html>
1.2文本属性
<!--1.color 设置文本颜色 -->
<!--2.text-align 设置对其方式【一个标签内的文本行对其方式】  left  right center -->
<!--3.text-indent 设置段落缩进
 ps： em 表示段落缩进字符个数的宽度 --》例如: 5em 相当于缩进5个字符
      %  段落缩进父容器的百分比    --》例如:  20% 相当于缩进父容器的20%
-->
<!--4.word-spacing 字符之间的间隔【只有对英文单词有作用】-->
<!--5.letter-spacing 单词或字母之间的间隔 【只对字母有效】-->
<!--6.line-height 设置行高-->
<!--复合属性text-decoration：可以直接设置文本样式 line（种类） style（样式） color（颜色）
  line种类： none不装饰  underline 添加下划线  overline在上方添加一个上划线  
  line-through 中间横线
  
  style样式   solid 实线  double 双线  dotted 点状线条  dashed 虚线  wavy 破浪线
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本CSS属性</title>
    <style type = "text/css">
        #p1{
            color: red;
            text-indent: 5em;
            word-spacing:500px;
            line-height: 100px;

        }
        #p2{
        text-decoration: line-through double green;
        }
        #p3{
            word-spacing: 100px;
            letter-spacing: 100px;
        }
    </style>
</head>
<body>
   <p id = "p1" >士大夫拉的屎房间里打开数据放到垃圾分类看到数据父类大姐夫劳动纪律风刀霜剑奥拉夫都结束了开发建安路附近ADSL减肥啦</p>
   <p id = "p2">士大夫拉的屎房间里打开数据放到垃圾分类看到数据父类大姐夫劳动纪律风刀霜剑奥拉夫都结束了开发建安路附近ADSL减/p>
   <p id="p3">hello</p>
</body>
</html>
Doub1eOne
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值