CSS基础

最新推荐文章于 2023-08-18 20:40:23 发布

苏瞳呐

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量1.9k

点赞数 5

分类专栏： JavaWeb 笔记文章标签： css css3 1024程序员节

本文链接：https://blog.csdn.net/m0_53492310/article/details/124177810

版权

笔记同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

JavaWeb

16 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括其用于控制网页样式的功能和与HTML的结合方式。从内联样式到内部样式表，再到外部样式表的引入，探讨了不同方法的优缺点。此外，文章还涵盖了常见的选择器，如标签选择器、ID选择器和类选择器，以及如何使用组合选择器。最后，列举了一些常用的CSS样式属性，如颜色、字体大小、边框和对齐方式。

摘要由CSDN通过智能技术生成

文章目录

CSS

1.介绍

层叠样式表单，是用于(增强)控制网页样式并允许样式信息与网页内容分离的一种标记性语言

2.语法

P是选择器：决定html页面中那些元素收影响，font-size是属性，可以有多个声明，需要用分号隔开，80px是值

P {
    font-size:80px
}

3.CSS和HTML结合

直接在html的标签的style属性上设置，即在标签style属性上设置"key:value value;"，每个标签都要style属性，px为像素。
缺点：样式多了就代码非常庞大，可读性差，css代码没有复用性！

<div style="border: 1px solid red;
            height: 100px; 
            width: 100px; 
            background-color: green;
            text-align: center">div标签1
</div>
<div style="border: 1px solid red">div标签2</div>
<span style="border: 1px solid green">span标签1</span>
<span style="border: 1px solid green">span标签2</span>

在head标签中，使用style标签来定义自己的样式
缺点：只能在同一个页面复用，维护不方便，实际中会有成千上万个页面

<!-- 效果和上面一样-->
<head>
    <meta charset="UTF-8">
    <title>testcss</title>
    <!--style标签专门用来定义css样式代码，里面写的代码是css的代码-->
    <style type="text/css">
        div {           /* 不管有多少个div标签都有效*/
            border: 1px solid red;
        }        
        span {           
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

在head标签中通过link标签引入css代码文件，即把css样式写成一个单独的css文件，在通过link标签引入，即可多个页面复用！！最常用

<!-- 3.-->
<head>
    <meta charset="UTF-8">
    <title>testcss</title>

    <!-- link专门用来引入css样式代码！！！！！-->
    <link rel="stylesheet" type="text/css" href="testcss01.css"/>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

testcss01.css文件，这里写的代码和刚刚style标签里面写的代码是一样的：

div {
    border: 1px solid red;
}
span {
    border: 1px solid green;
}

4.常见选择器

标签名选择器
可以决定那些标签被动的使用这个样式，这种选择器在页面引入就能用

/*
和上面一样
标签名 {
	属性： 值;
	...
}
*/

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

id选择器
可以让我们通过id属性选择性的使用这个样式。

/*
#id 属性值 {
    属性: 值;
}
*/

#id001 {
    color: blue;
    font-size: 30px;
    border: 5px dotted black;
}
#id002 {
    color: aqua;
    font-size: 10px;
}
/* 我们重点是怎么使用样式，我们看到样式是#xxx,我们标签属性id选择我们要用的样式就行了*/
<div id="id001">div标签111</div>
<div id="id002">div标签222</div>

class选择器
可以通过class属性有效的选择性性取使用这个样式

/*重点怎么用
.class 属性值 {
	属性： 值;
}
*/

.class01 {
    color: blueviolet;
    border: 3px solid black;
}
.class02 {
    font-size: 10px;
    color: brown;
}
<div class="class01">div标签333</div>
<div class="class02">div标签444</div>
<div class="class01">div标签555</div>

组合选择器
主要是让多个选择器共同一个css样式代码。

/*
选择器1，选择器2，选择器n {
	属性: 值;
}
*/
 
/*修改class="class01",id="id001",所有的span标签*/
.class01, #id001, span {
    color: darkblue;
    font-size: 50px;
}

5.常用样式

我们学后端的，虽然我们不怎么写，了解一下也好。

div {
    color: red; 字体颜色
    font-size: 20px; 字体大小
    border: 1px yellow solid; 边框颜色样式 solid是实线
    width: 19px; 宽度
    height: 20px; 高度
    background-color: aqua; 背景颜色
    margin-left: auto; div标签框剧中
    margin-right: auto; 
    text-align: center; div中的文字剧中
}

a {
    text-decoration: none; 超链接去除下划线    
}

td,th {
    border: 1px solid black;
}
table {
    border: 1px solid black;
    border-collapse: collapse;  将td的边框和table的边框合并
}

ul {
    list-style: none; 去掉无需列表前面的东西，即使不同的浏览器也没问题
}