【JavaWeb习笔记】DAY03——CSS

发量惊人的宝芙

已于 2022-07-01 18:40:06 修改

阅读量787

点赞数 1

分类专栏： JavaWeb学习文章标签： java 学习 css

于 2022-07-01 18:38:51 首次发布

本文链接：https://blog.csdn.net/m0_62106729/article/details/125555379

版权

JavaWeb学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

本文总结了CSS语言相关知识点。包括创建CSS文档、使用CSS语言、介绍了id选择器和class选择器、总结了常用的CSS样式。

一、CSS语法

CSS语法由三部分组成：选择器、属性、值，其中

选择器：浏览器根据选择器决定受到影响的HTML元素

属性：需要改变的样式名，每个属性对应一个值，属性和值之间用冒号隔开，并用花括号扩住，例如:选择器{属性：值}

多个声明：一个花括号里可以写多个属性：值，每一个键值对之间用分号隔开，例如{属性：值；属性：值；}。一般为了增加可读性，每一行只写一个键值对。

CSS注释：/*注释内容*/

二、CSS与HTML结合

通常我们会把CSS样式单独写成一个CSS文件，这样做的好处是可以在多个HTML页面中复用。

首先先在IDEA中创建一个CSS文件

举例：写随便写一个HTML页面

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>一只可爱的小猪猪</div>
<div>一只帅气的小猫咪</div>
<span>小宝儿</span></br>
<span>我是宝芙小淘气！！</span>
</body>
</html>

它的效果是这样子的：

现在给每一行都加上一个边框，首先写一个CSS文档

div{
    border: crimson 1px solid;/*设置边框:颜色的crimson 宽度是1个像素 线性是实线*/
}
span{
    border: crimson 1px solid;/*设置边框:颜色的crimson 宽度是1个像素 线性是实线*/
}

在HTML文件中在<head>中使用link标签引入css样式

    <link rel="stylesheet" type="text/css" href="MyCss.css">

效果如下：

更多的样式属性可以在CSS 参考手册 | w3cschool菜鸟教程上查到。

三、ID选择器

通过ID选择器可以为同样的标签选择不同的样式，举例：

<div id="id001">一只可爱的小猪猪</div>
<div id="id002">一只帅气的小猫咪</div>

在CSS文件里修改：

#id001{
    border: crimson 1px solid;/*设置边框:颜色的crimson 宽度是1个像素 线性是实线*/
    color: blue;/*字体颜色是蓝色*/
    font-size: 20px;
}
#id002{
    border: crimson 1px dashed;/*设置边框:颜色的crimson 宽度是1个像素 线性是实线*/
    color: yellow;/*字体颜色是蓝色*/
    font-size: 30px;
}

效果图如下：

四、CLASS选择器

通过CLASS选择器可以为同样的标签选择不同的样式，举例：

.class01{
    border: crimson 1px solid;/*设置边框:颜色的crimson 宽度是1个像素 线性是实线*/
    color: blue;/*字体颜色是蓝色*/
    font-size: 20px;
}
.class02{
    border: crimson 1px dashed;/*设置边框:颜色的crimson 宽度是1个像素 线性是实线*/
    color: yellow;/*字体颜色是蓝色*/
    font-size: 30px;
}

在HTML中修改：


<div class="class01">一只可爱的小猪猪</div>
<div class="class02">一只帅气的小猫咪</div>

五、CSS常用样式

样式属性	举例	说明
color	color:red	字体颜色为红色
width	width:300px	此标签的边框宽度为300像素
heigth	heigth:150px	此标签的边框高度为150像素
border	border: crimson 1px solid	设置边框:颜色的crimson 宽度是1个像素线性是实线
font-size	font-size: 20px	字体大小为20个像素
background-color	background-color: brown	背景颜色为棕色
margin-left: auto margin-right: auto		标签居中
text-align: center		文本居中
list-style:none		去除列表样式