HTML/CSS学习笔记四

最新推荐文章于 2024-09-21 22:09:19 发布

小疯子青

最新推荐文章于 2024-09-21 22:09:19 发布

阅读量146

点赞数

分类专栏： Tomcat学习实践过程记录

本文链接：https://blog.csdn.net/a1773570500/article/details/105248637

版权

Tomcat学习实践过程记录专栏收录该内容

57 篇文章 2 订阅

订阅专栏

CSS 技术

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

CSS 语法规则

选择器 {
属性：数值；
…
属性：数值；
}
例如：

p{
color:red;
font-size:30px;
}

CSS 注释

/*注释内容*/

CSS 和 HTML 的结合方式

第一种

在标签的 style 属性上设置”key:value value;”，修改标签样式。

<div style="border: 1px solid #6489ff;">div标签</div>

问题：这种方式的缺点？
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css 代码没什么复用性可方言。

第二种

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。
格式如下：

xxx {
Key : value value;
}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    /*这个里面不能使用css注释*/
    div{
        border: 1px solid #6489ff;
    }
    </style>
</head>

问题：这种方式的缺点。
1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

第三种

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" /> 标签导入 css 样式文件。

CSS 选择器

标签名选择器

标签名选择器的格式是：
标签名{
属性：值;
}

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

id 选择器

id 选择器的格式是：

#id属性值{
属性： 值;
} 
i

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

#id001{
    color:blue;
    font-size:30px;
    border: 1px yellow solid;
}
#id002{
    color:red;
    font-size:20px;
    border:5px blue dotted;
}

class 选择器

class 类型选择器的格式是：

.class属性值{
属性： 值;
}

class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。

.class01{
    color:blue;
    font-size:30px;
    border:1px solid yellow;
}
.class02{
    color:grey;
    font-size:26px;
    border:1px solid red;
}

组合选择器

组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
属性：值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码。

CSS 的常用样式

1.字体颜色
color： red；
2.宽度
width:19px;
3.高度
height:20px;
4.背景颜色
background-color:#0F2D4C
5.字体大小
font-size： 20px;
6.红色 1 像素实线边框
border： 1px solid red;
7.DIV 居中
margin-left: auto;
margin-right: auto;
8.文本居中
text-align: center;
9.超连接去下划线
text-decoration: none;
10.表格细线
table {
border: 1px solid black; /设置边框/
border-collapse: collapse; /将边框合并/
}
td,th {
border: 1px solid black; /设置边框/
}
11.列表去除修饰
ul {
list-style: none;
}