CSS学习笔记

最新推荐文章于 2024-10-09 12:38:59 发布

沈听澜დ

最新推荐文章于 2024-10-09 12:38:59 发布

阅读量155

点赞数

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

本文链接：https://blog.csdn.net/qq_52150810/article/details/124023916

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一. 入门

CSS:Cascading Style Sheet 层叠样式表

CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

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

二. 3种常用导入方式

1.行内样式：

在标签的 style 属性上设置”key:value value;”

<body>
<!--需求 1，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
<div style="border: 1px solid red;">div 标签 1</div>
<div style="border: 1px solid red;">div 标签 2</div>
</body>

2. 内部与外部样式：

<!-- html内容 -->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
  	<!--外部样式-->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--style 标签专门用来定义 css 样式代码-->
    <style><!--内部样式-->
        h1{
            color: green;
        }
    </style>
</head>

/* css内容 */
h1{
border: 1px solid yellow;
}

三. 选择器：

1.标签选择器：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: orange;
            background: blue;
            border-radius: 20px;
        }
        h3 {
            color: orange;
            background: blue;
            border-radius: 10px;
        }
        p {
            font-size: 40px;
        }
    </style>
</head>
<body>
<h1>标签选择器1</h1>
<p>标签选择器2</p>
<h3>标签选择器3</h3>
</body>

二. 类选择器：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称{}
            好处：可以多个标签归类，是同一个class，可以复用*/
        .demo1 {
            color: blue;
        }
        .demo2 {
            color: red;
        }
        .demo3 {
            color: #5cdb32;
        }
   </style>
</head>
<body>
<h4 class="demo1">类选择器：demo1</h4>
<h4 class="demo2">类选择器：demo2</h4>
<h4 class="demo3">类选择器：demo3</h4>
<p class="demo3">p标签</p>
</body>

三. id选择器：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>        
        /*id选择器：id必须保证全局唯一
            #id名称{}
            不遵循就近原则，优先级是固定的
            id选择器 > class类选择器 > 标签选择器
        */
        #demo1 {
            color: red;
        }
        .demo2 {
            color: green;
        }
        #demo2 {
            color: orange;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
<h1 id="demo1" class="demo2">id选择器：demo1</h1>
<h1 class="demo2" id="demo2">id选择器：demo2</h1>
<h1 class="demo2">id选择器：demo3</h1>
<h1>id选择器：demo4</h1>
<h1>id选择器：demo5</h1>
</body>

优先级：id > class > 标签

四. 组合选择器：

组合选择器可以让多个选择器共用同一个 css 样式代码。

<head>
<meta charset="UTF-8">
<title>class 类型选择器</title>
<style type="text/css">
.class01 , #id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<!--
需求 1：修改 class="class01" 的 div 标签 和 id="id01" 所有的 span 标签，
字体颜色为蓝色，字体大小 20 个像素。边框为 1 像素黄色实线。
-->
<div id="id01">div 标签 class01</div> <br />
<span >span 标签</span>
<br />
<div>div 标签</div> <br />
<div>div 标签 id01</div> <br />
</body>