HTML+CSS样式学习

最新推荐文章于 2024-06-14 14:36:26 发布

起个花名好难

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量116

点赞数 2

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

本文链接：https://blog.csdn.net/cly_32/article/details/118682765

版权

JavaWeb学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML+CSS样式学习

1、什么是CSS？
2、CSS语法：
3、CSS使用
4、CSS选择器

1、什么是CSS？

CSS 是一种描述 HTML 文档样式的语言。
CSS 描述应该如何显示 HTML 元素。

2、CSS语法：

CSS学习参考手册
在这里插入图片描述

3、CSS使用

3.1外部CSS:

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。

<!--.css样式文件-->
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

3.2内部CSS

内部样式在 HTML 页面的部分内的

<!--内部CSS在head里面的style元素中定义CSS样式-->
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

3.3行内CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式；使用行内样式，需要将 style 属性添加到相关元素；style 属性可包含任何 CSS 属性。

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

4、CSS选择器

4.1通用选择器

4.1.1根据HTML元素名称

<!--
1、在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义各种HTML标签样式：
2、使用方式跟3.2内部选择器使用方法一致：-->
<head>
<style>
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

4.1.2根据id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style type="text/css">
        #id001{
            color: chocolate;
            font-size:20px ;
        }
    </style>
</head>
<body>
<div id="id001">div标签1</div>
</body>
</html>

4.2类选择器

类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--类名称定义为center-->
    <style type="text/css">
        .center {
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
<!-- 调用格式标签内 class = 标签名 -->
<p class="center">段落标签1</p>
</body>
</html>

4.3分组选择器

1、分组选择器选取所有具有相同样式定义的 HTML 元素。
2、用逗号来分隔每个选择器，对选择器进行分组以最大程度地缩减代码。
用*默认选择所有html元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style type="text/css">
        p,div {
            text-align: center;
            color: red;
            font-size: 24px;
        }
    </style>
</head>
<body>
<p>段落标签1</p>
<div>div标签1</div>
</body>