css

本文详细介绍了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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值