css-优快云博客

本文链接：https://blog.youkuaiyun.com/luolvxing/article/details/116945981

本文详细介绍了CSS的基本概念及其语法，包括CSS如何与HTML结合使用的方法，如内联样式、内部样式表及外部样式表等。此外还讲解了CSS的选择器类型，如标签名选择器、ID选择器、类选择器及组合选择器，并提供了常用的CSS样式设置技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

day1-css

CSS样式

CSS是用来增强/控制网页样式信息与网页内容分离的一种标记性语言

CSS语法规则

选择器{介值对}

选择器{

属性：属性值；

}

CSS注释、/* 注释内容 */

css和HTML结合的方式

1、在HTML标签的style属性中设置"key:value value ;"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div style="border:1px solid red; ">样式设置测试</div>
</body>
</html>

缺点：样式多了以后不好排，代码复用性差

2、在head标签中使用style标签定义自己需要的才CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS测试</title>
    <style type="text/css">
        div{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div>css test</div>
    <div>css test</div>
    <span>css test</span><br/>
    <p>css test</p>
</body>
</html>

3、单独写下CSS文件中，在HTML文件中通过link标签引用CSS文件，加强了代码的复用性

 <link rel="stylesheet" type="text/css" href="./css1.css"/>
 
 css页面
 div{
    border:1px solid red;
}

CSS选择器

1、标签名选择器–决定哪些标签被动的使用这个样式

标签名{

属性：属性值；

}

div{
    border:1px solid yellow;
    font-szie:30px;
    color:blue;

}
span{
    color:yellow;
    border:5px dashed blue;
    font-size:20px;
}

2、id选择器–通过id属性选择器去使用这个样式

#id属性值{

属性：属性值；

}

#id1{
    color:green;
    font-size:40px;
    border:1px solid blue;
}

3、class选择器（类选择器）

.class属性值{

属性：属性值；

}

.class1{
    color:blue;
    font-size:30px;
    border:1px solid yellow;
}

注：id不可以重复，但是class可以重复

4、组合选择器–让多个选择器共用一个CSS代码，实现代码的复用性

选择器1，选择器2，…选择器n{

属性：属性值

}

.class1,#id1{
    color:blue;
    font-size:20px;
    border:1px solid yellow;
}

css的常用样式

div居中，块相对与页面居中

div{
    /* 让div居中，需要设置边框的左右边距*/
    margin-left:auto;
    margin-right:auto;
    /*文本居中*/
    text-align:center;
    
}
a{
    /*超链接去掉下划线*/
    text-decoration:none;
    
}
table{
    /*表格细线*/
    border:1px green solid;/*设置边框*/
    border-collapse:collapse;/*将边框合并*/
}
td{
    /* 单元格边框*/
    border:1px solid black;
}
ul{
    /*去掉列表前的符号*/
    list-style: none;
}