CSS文本属性

最新推荐文章于 2023-11-28 20:10:23 发布

qq_43921974

最新推荐文章于 2023-11-28 20:10:23 发布

阅读量120

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_43921974/article/details/123964095

版权

前端

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS语法规范</title>
    <style>
        /*在style中设置样式，标签{在这里设置样式}*/
       p {
           /*标签选择器，选择某一类标签*/
           font-size: 10px;
         }
/*自己定义结构类，然后自己再调用，很方便*/
        .str_sing{
            color: aqua;
        }
        .red{
           width: 100px;
           height: 100px;
           background-color: red;
        }
/*id选择器，样式#开头，结构id调用，与class的区别，只能调用一次，别人请勿调用        */
        #pink{
            color: blue;
        }

   /* *可以将HTML，span，div，li等所有的标签改为内部定义的样式     */
   /*   通配符选择器  不需要调用，但会和定义过的样式覆盖*/
        *{
            color: cyan;
        }

    </style>
</head>
<body>
   <p style="color: green">有点意思</p>
   <p >有点意思</p>
<ul>
    <li class="str_sing">yu</li>
<!--    可以在class中调用自己写的结构-->
    <li>yu</li>
</ul>

   <div class="red"></div>
<!--   两种方法实现对盒子样式的定义-->
   <div style="width: 100px; height: 100px; background-color: green"></div>
<!--多类名的使用，class后面加两个类名对标签组合作用-->
   <div class="str_sing red">王成军</div>
<!--   通过id调用ID选择器-->
   <div id="pink">且听风吟</div>


</body>
</html>

选择器效果
字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS属性之字体系列</title>
    <style>
       h2{
           font-family: 微软雅黑, Serif;
           size: B4;
          }
/*除标题外所有的内容改为16像素大小       */
        body {
            font-size: 16px;
        }
        .body{
            font-weight:700 ;
            /*使用这个属性改变字体粗细，400相当于nomal*/
            font-style: normal;
            /*改变字体的倾斜，主要用来将倾斜的文字变的不倾斜*/
        }
        /*设置文件对齐方式*/
        h1{text-align: center;
            /*设置文字下划线，删除线*/
        text-decoration: underline;
            /*设置首行缩进,em指文字大小*/
            text-indent: 2em;
        }
        div{
            line-height: 60px;
        }
    </style>
</head>
<body>
  h1>文字对齐</h1>
  <h2>字体样式选择</h2>
  <p class="body">前段总是苦难的</p>
  <em class="body">本来是倾斜的</em>
  <div>中国人</div>

<div></div>
</body>

z字体样式展示

字体属性展示

CSS引入方式
1.行内样式表

，单体控制，样式修改范围小

2.内部样式表

3.外部样式表：将样式文件另存，实现结构和定义分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入样式表</title>
<!--    rel定义引入的类型，stylesheet指的是样式表，href指的CSS文件-->
<!--   通过link引入 外部样式表-->
    <link rel="stylesheet" href="007.css">
   <style>
       .test{
           color: #666;
           width: 170px;
       }
       a{
           /*取消跳转的下划线*/
           text-decoration: none;
       }

       .pic{
           text-align: center;
       }
   </style>
</head>
<body>
   <div>外部样式表</div>
<!--在标签内定义style-->
   <div style="color: blue">行内样式表</div>
<!--   引用<style>中写的函数</style>-->
   <div class="test">内部样式表</div>

<a href="005.html">没有账号，立即注册</a> <br>
   
<input type="text" value="输入查询条件" class=".test">
<button>搜索</button>
<!--想要图片剧中对齐，对其父标签，设置剧中对齐-->
<p class="pic">
    <img src="1.jpg" style="width: 60px" height="60px">
</p>
</body>
</html>

在样式表

qq_43921974

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS文本属性

案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS语法规范</title> <style> /*在style中设置样式，标签{在这里设置样式}*/ p { /*标签选择器，选择某一类标签*/ font-size: 10px;
复制链接

扫一扫