CSS简介选择器和文本(一)


网络369 阅0 评

一、CSS的简介

1.css-网页的美容师

  css是层叠样式表(Cascading Style Sheets)的简称,有时也称之为css样式表或级联样式表。css也是一种标记语言。css主要用于设置html页面内的文本内容、图片外形以及版面的布局和外观显示样式。

二、CSS基础选择器

1.标签选择器

<!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>体验CSS语法规范</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式 {改什么样式} */
        p {
            color: red;
        }
    </style>
</head>
<body>
   <p>体验CSS语法规范</p>
</body>
</html>

2.ID选择器

<!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>
        /* id选择器口诀:样式#定义 结构id调用 只能调用一次  他人切勿使用 */
        #green {
            color: green;
        }
     </style>
</head>
<body>
    <div id="green">我是id选择器</div>
</body>
</html>

3.类选择器

<!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>基础选择器之类选择器</title>
     <style>
        /* 类选择器口诀:样式点定义 结构类(class)调用 一个或多个 开发最常用  */
        .red {
            color: red ;
        }
        .green {
            color: green;
        }
     </style>   
    
</head>
<body>
    <ul>
        <li class="red">基础选择器</li>
        <li class="red">类选择器</li>
        <li class="green">id选择器</li>
    </ul>
</body>
</html>

4.通配符选择器

<!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>通配符选择器</title>
    <style>
        /* *这里把html body div span 等等标签都改为了红色 */
        * {
            color: red;
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div>我的</div>
    <span>你的</span>
    <pre>他的</pre>
</body>
</html>

5.多类名选择器

<!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>多类选择器使用方法</title>
    <style>
        /* 多个类别中间空格隔开 */
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">多类选择器</div>
</body>
</html>

三、CSS文本属性

1.字体粗细

<!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>css字体属性之字体粗细系列</title>
    <style>
       /* 后面也可输入数字700 等价于bold都是加粗效果  */
       /* 实际开发中,我们更提倡使用数字表示加粗或变细 */
        .bold {
           font-weight: bold;
        }
    </style>
</head>
<body>
   <h2>css字体属性之字体大小系列</h2> 
   <p>css字体属性之字体大小系列</p>
   <p>css字体属性之字体大小系列</p>
   <p class="bold">css字体属性之字体大小系列</p>
   <p>css字体属性之字体大小系列</p>
</body>
</html>

2.字体颜色

<!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>css字体属性之字体颜色</title>
    <style>
        /* 字体可以用预定颜色值、十六进制、RGB代码表示 */
        p {
            color: red;  #FF0000 rgb(225,0,0)
        }
    </style>
</head>
<body>
    <p>css字体属性之字体颜色</p>
</body>
</html>

3.字体样式

<!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>css字体属性之字体样式</title>
    <style>
        p {
            /* italic表示倾斜样式 */
            font-style: italic;
        }
        em {
            /* normal表示正常字体 可让斜体表示成正体 */
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>css字体属性之字体样式</p>
    <em>css字体属性之字体样式</em>
</body>
</html>

4.文本对齐

<!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>css文本属性之文本对齐</title>
    <style>
        /* 属性值有 :left(左对齐)  right(右对齐)  center(居中对齐) */
        div {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>css文本属性之文本对齐</div>
</body>
</html>

5.装饰文本

<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css文本属性之装饰文本</title>
    <style>
        div {
            /* 下划线 */
            /* text-decoration: underline; */
            /* 删除线 */
            /* text-decoration: line-through; */
            /* 上划线 */
            text-decoration: overline;
        }
        a {
            /* 取消a默认的下划线 */
            text-decoration: none ;
            color:brown;
        }
    </style>
</head>
<body>
    <div>css文本属性之装饰文本</div>
    <a href="#">css文本属性之装饰文本</a>
</body>
</html>

6.文本缩进

<!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>css文本外观之文本缩进</title>
    <style>
        p {
            font-size: 24;
            /* 文本的第一行首行缩进多少距离 */
            /* text-indent: 20px; */
            /* 如果此时填写2em 则是缩进当前元素2个文字大小的距离 */
            text-indent: 2em;
            /* line-height: 表示行间距 数字控制具体距离 */
            line-height: 30px;
        }
    </style>
</head>
<body>
    <p>配合中国放宽入境政策,中国国家移民管理局宣布2023年1月8日起,有序恢复受理审批中国公民因出国旅游和访友申请普通护照,还有外国人普通签证、停留证件,以及居留证件的签发、延期、换发等服务。</p>
    <p>css文本外观之文本缩进</p>
</body>
</html>

四、CSS引入方式

<!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>css引入方式</title>
</head>
<body>
    <!-- 这是行内样式表 把style内容写在标签内 -->
    <div style="color:red; font-size:25px;">css引入方式</div>
    <!-- 外部样式表在html使用link标签引入 -->
    <link rel="stylesheet" href="css文件路径">
</body>
</html>
最后更新 2023-02-28
评论 ( 0 )
OωO
隐私评论