CSS(网页外观、布局设计)

小谭同学ha

已于 2023-12-14 15:36:14 修改

阅读量3.6k

点赞数 3

文章标签： css 前端 html

于 2023-04-14 20:46:54 首次发布

本文链接：https://blog.csdn.net/qq_69032468/article/details/129739283

版权

概述

🐳CSS是Cascading Style Sheets（级联样式）

🐳 CSS与HTML的关系：HTML是网页内容； CSS定义页面的样式

2.基本语法

🐳行内样式表：开发用的少

🐳内嵌样式表：将css代码写在head头部标签中，并用styli标签定义

🐳外部样式表：将所有样式放在一或多个.CSS外部样式表文件中，通过link标签将其链接到HTML文档中

 <!--指CSS文件目录 文件名：index.css-->
/* css中只有属性 */
p{color: aqua;font-size: 30px;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    
        <!-- 导入外部的css文件   外部样式表 -->
        <link href="css/index.css" rel="stylesheet" />

        <!-- 此标签内，用来写css样式表 
            内嵌样式表-->
        <style type="text/css">
            p{color: aqua;font-size: 30px;}
        </style>

    </head>
    <body>
        <p>
             CSS是Cascading Style Sheets（级联样式表）。
        </p>
        
        <!--行内样式表 开发用的少-->
         <p 
             style="color: aqua;font-size: 20px; font-weight: 100;">
        </p>
    </body>
</html>

3.选择器

🐳id选择器：通过标签的id属性选择唯一的一个标签

🐳类选择器：通过标签的class属性选择一组标签

🐳标签选择器：通过标签名进行匹配

🐳通配选择器：选页面中所有的标签

🐳分配器有优先级：

👻 由高到低： id选择器>类选择器>标签选择器>通配选择器

👻 匹配越多的选择器，优先级越低

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        /* 标签选择器 */
        
        /* p{
            color: #00FFFF;font-size: 30px;
        } */
        
        /* 类选择器 */
        .p1{color: aquamarine;}
        .p2{color: red;}
        .p3{color: gray;}
        
        /* 选择器组合 */
        .p1,.p2{color: yellow;}
        /* .h1{color: #FF0000;} */
        
        /* id选择器 */
        #h1{color: aquamarine;}
      
        </style>
    </head>
    <body>
        <h1 id="h1"> 标题</h1>
        <!-- <h1 class="h1"> 标题</h1> -->
        
        <p class="p1">
             CSS是Cascading Style Sheets（级联样式表）。
        </p>
        <p class="p2">
             CSS是Cascading Style Sheets（级联样式表）。
        </p>
        <p class="p3">
             CSS是Cascading Style Sheets（级联样式表）。
        </p>
    </body>
</html>

4.文本

基本属性
color：  字体颜色
font-size：  字体大小
font-family：  字体
text-align：  文本对齐
text-decoration:line-through：  定义穿过文本下的一条线
text-decoration:underline：  定义文本下的一条线
text-decoration:none：  定义标准的文本
font-style: italic  斜体文本
font-weight:  字体粗细
line-height:  设置行高
letter-spacing:  可以指定字符间距
text-indent:  用来设置首行缩进

5.背景

基本属性
background-color  背景颜色
background-image  背景图片
background-repeat  背景重复
background-size  背景尺寸
background- position  背景位置

6.列表

列表属性可以放置、改变列表项标志，或者将图像作为列表项标志

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        /*后代选择器  父级 子级*/
            .u1 li{
                color: #7FFFD4;
                text-align: center;
                list-style: url(./img/java.png) inside none;
                
            }
        </style>
    </head>
    <body>
        <ul class="u1">
            <li>CSS是Cascading Style Sheets（级联样式表）。</li>
            <li>CSS是Cascading Style Sheets（级联样式表）。</li>
        </ul>
        
        <ul class="u2">
            <li>CSS是Cascading Style Sheets（级联样式表）。</li>
            <li>CSS是Cascading Style Sheets（级联样式表）。</li>
        </ul>
    </body>
</html>