山高路远，看世界|
收藏闪存小组博问

银河小船儿

园龄：1年7个月粉丝：11关注：4

Css简要笔记

Css官方文档：

https://www.w3school.com.cn/css/index.asp

1，css快速入门和语法

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css快速入门</title>
<!--    1. 在 head 标签内，出现了 <style type="text/css"></style>-->
<!--    2. 表示要写 css 内容-->
<!--    3. div{} 表示对 div 元素进行样式的指定 div 就是一个选择器(元素/标签选择器)-->
<!--    4. width: 300px(属性); 表示对 div 样式的具体指定, 可以有多个-->
<!--    5. 如果有多个，使用; 分开即可, 最后属性可以没有; 但是建议写上-->
<!--    6. 当运行页面时，div 就会被 div{} 渲染，修饰-->
<!--    7. 小经验：在调试 css 时，可以通过修改颜色，或者大小来看-->
<!--    8. css 的注释是 /* */ ,快捷键 ctrl+/-->

<!--    CSS 语法可以分为两部分： (1)选择器 (2)声明 -->
<!--    9. 声明由属性和值组成，多个声明之间用分号分隔 比如 width: 300px; -->
<!--    10. 老韩说明：最后一条声明可以不加分号(建议加上)-->
<!--    11. 一般每行只描述一个属性-->

    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: beige;
        }
    </style>
</head>
<body>
<!--先使用传统的方法-->
<div>hello,北京</div>
<br/>
<div>hello,上海</div>
<br/>
<div>hello,天津</div>
<br/>
</body>
</html>
复制代码

 2，字体颜色，边框，宽度 width/高度 height

2.1，字体颜色

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色</title>
<!--    为了讲课方便，我们就在这里写css样式-->
<!--    说明:-->
<!--    颜色可以写颜色名 比如 green，-->
<!--    也可以写 rgb 值 比如 rgb(200,200,200)韩顺平 Java 工程师-->
<!--    和十六进制表示值 比如 #708090-->
<!--    color: rgb(255, 222, 1); //color: #ff7d44; //color: red;-->
<!--    */-->
    <style type="text/css">
        div {
            color: pink;
        }
    </style>
</head>
<body>
<div>船儿很奶思</div>
</body>
</html>
复制代码

 2.2，边框

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
   <style type="text/css">
       div {
           width: 300px;
           height: 100px;
           border: 5px solid blue; <!--solid是实线 -->
       }
   </style>
</head>
<body>
<div>船儿很奶思</div>
</body>
</html>
复制代码

 2.3，宽度 width/高度 height

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
   <style type="text/css">
       div {
           width: 50%; <!--宽度/高度像素值： 100px； 也可以是百分比值： 50%，按页面的百分比计算 -->
           height: 100px;
           border: 5px solid blue; <!--solid是实线 -->
       }
   </style>
</head>
<body>
<div>船儿很奶思</div>
</body>
</html>
复制代码

 3，背景颜色和字体样式

3.1，背景颜色

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
   <style type="text/css">
       div {
           width: 200px;
           height: 100px;
           background-color: pink;
       }
   </style>
</head>
<body>
<div>船儿很奶思</div>
</body>
</html>
复制代码

 3.2，字体样式

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居中显示</title>
<!--    1. font-size: 指定大小，可以按照像素大小-->
<!--    2. font-weight : 指定是否是粗体-->
<!--    3. font-family : 指定字体类型-->
   <style type="text/css">
       div {
           font-size: 40px;
           font-weight: bold;
           font-family: 楷体;
           border: 3px solid pink;
           width: 300px;
       }
   </style>
</head>
<body>
<div>船儿很奶思</div>
</body>
</html>
复制代码

 

 

4，div和文本居中

4.1，div居中

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居中显示</title>
<!--    1. margin-left margin-right 如果设置为auto，表示左右居中-->
   <style type="text/css">
       div {
           font-size: 40px;
           font-weight: bold;
           font-family: 楷体;
           border: 3px solid pink;
           width: 300px;
           margin-left: auto;
           margin-right: auto;
       }
   </style>
</head>
<body>
<div>船儿很奶思</div>
</body>
</html>
复制代码

 4.2，文本居中

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本居中显示</title>
<!--    text-align: center 文本居中-->
   <style type="text/css">
       div {
           font-size: 40px;
           font-weight: bold;
           font-family: 楷体;
           border: 3px solid pink;
           width: 300px;
           margin-left: auto;
           margin-right: auto;
           text-align: center;
       }
   </style>
</head>
<body>
<div>船儿很奶思</div>
</body>
</html>
复制代码

 

5，超链接去下划线和表格细线

5.1，超链接去下划线

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格细线</title>
    <!--
    1. decoration 修饰
    -->
    <style type="text/css">
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">点击到百度</a>
</body>
</html>
复制代码

 

5.2，表格细线

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格细线</title>
<!--    设置边框 : border: 1px solid black-->
<!--    将边框合并: border-collapse: collapse;-->
<!--    指定宽度： width-->
<!--    设置边框： 给 td, th 指定即可 border: 1px solid black; -->
<!--    老韩解读-->
<!--    1. table, tr, td 表示组合选择器-->
<!--    2. 就是 table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性-->
   <style type="text/css">
       table, tr, td {
           width: 300px;
           border: 1px solid black;
           border-collapse: collapse;
       }
   </style>
</head>
<body>
<!--就是把width,border,border-collapse,用css控制，其他的 合并行，合并列，表格里的文字居中还要写-->
<table>
    <tr>
        <td align=center colspan="3">星期一菜谱</td>
    </tr>
    <tr>
        <td rowspan=2>素菜</td>
        <td>青草茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
        <td>小葱豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
        <td rowspan=2>荤菜</td>
        <td>油闷大虾</td>
        <td>海参鱼翅</td>
    </tr>
    <tr>
        <td>红烧肉</td>
        <td>烤全羊</td>
    </tr>
</table>
</body>
</html>
复制代码

6，无序列表去掉样式

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表去修饰</title>
    <!--
    list-style:none 表示去掉默认的修饰
    -->
    <style type="text/css">
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>三国演义</li>
    <li>红楼梦</li>
    <li>西游记</li>
    <li>水浒传</li>
</ul>
</body>
</html>
复制代码

 

7，CSS使用方式1行内样式

方式 1： 在标签的 style 属性上设置 CSS 样式

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在标签的 style 属性上设置CSS样式</title>
</head>
<body>
<div style="width: 300px; height: 100px; background-color: red">船儿很奶思</div>
<br/>
<div style="width: 300px; height: 100px; background-color: red">船儿很奶思</div>
<br/>
<div style="width: 300px; height: 100px; background-color: red">船儿很奶思</div>
<br/>
</body>
</html>
复制代码

问题分析

  •  标签多了。样式多了，代码量庞大
  •  可读性差
  •  CSS 代码没有复用性

8，CSS使用方式2-head标签style指定

方式 2： 在 head 标签中， 使用 style 标签来定义需要的 CSS 样式

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在 head 标签中，使用 style 标签来定义需要的 CSS 样式</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: beige;
        }
        span {
            border: 3px solid red;
        }
    </style>

</head>
<body>
<div>船儿很奶思</div>
<br/>
<div>船儿很奶思</div>
<br/>
<span>船儿很奶思</span>
<br/>
</body>
</html>
复制代码

问题分析

 只能在同一页面内复用代码维护不方便，

 实际项目中会有很多页面，需要到对应页面去修改。工作量大

 

9，CSS使用方式3-引入外部CSS文件

自己建一个包，包里再建一个 Stylesheet，Stylesheet文件是 my.css

 my.css 代码：

复制代码
div {
    width: 200px;
    height: 100px;
    background-color: brown;
}
span {
    /*dashed是虚线*/
    border: 3px dashed pink;
}
复制代码

 

html文件代码：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入外部的css文件</title>
    <!--link 标签专门用来引入 css 样式代码-->
    <!--
       1，rel : relation 关联
       2，href 表示要引入的css文件的位置，可以是web的完整路径
       3，type="text/css" 可以有，也可以不有
       4，可以有多个 link
    -->
    <link rel="stylesheet" href="./css/my.css" />
</head>
<body>
<div>船儿很奶思</div>
<br/>
<div>船儿很奶思</div>
<br/>
<span>船儿很奶思</span>
<br/>
</body>
</html>
复制代码

 

10，CSS元素选择器（作用全部）

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <!--    1. 最常见的 CSS 选择器是元素选择器。 换句话说， 文档的元素就是最基本的选择器。-->
    <!--    2. CSS 元素/标签选择器通常是某个 HTML 元素， 比如 p、h1、a div 等-->
    <style type="text/css">
        h1 {
            color: pink;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
<h1>船儿很奶思</h1>
<p>hello</p>
</body>
</html>
复制代码
复制代码
复制代码

11，ID选择器（作用唯一）

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <!--    1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。-->
    <!--    2. id 选择器以 "#" 来定义。-->
    <!--    3. 使用 id 选择器，需要先在要修饰元素指定 id 属性, id 值是程序员自己指定-->
    <!--    4. id 是唯一的，不能重复-->
    <!--    5. 在<style> 标签中指定 id 选择器时，前面需要有 #id 值-->
    <style type="text/css">
        #ch1 {
            color: gold;
        }
        #css2 {
            color: green;
        }
    </style>
</head>
<body>
<h1 id="ch1">船儿很奶思</h1>
<p id="css2">hello</p>
</body>
</html>
复制代码
复制代码
复制代码

12，类选择器（作用部分）

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
<!--    1. 1. class 类选择器， 可以通过 class 属性选择去使用这个样式-->
<!--    2. 使用 class 选择器，需要在被修饰的元素上，设置 class 属性,属性值程序员指定-->
<!--    3. class 属性的值，可以重复-->
<!--    4. id 是唯一的，不能重复-->
<!--    5. 需要在 <style></style> 指定类选择器的具体样式, 前面需要是 .类选择器名称-->
    <style type="text/css">
        .css1 {
            color: red;
        }
        .css2 {
            color: coral;
        }
    </style>
</head>
<body>
<h1 class="css1">船儿很奶思</h1>
<h1 class="css1">船儿很奶思1</h1>
<p class="css2">hello</p>
</body>
</html>
复制代码

 13，组合选择器和选择器的优先级

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <!--    1. 组合选择器可以让多个选择器共用同一个 css 样式代码-->
    <!--    2. 组合选择器的基本语法: 选择器 1，选择器 2，选择器 n{ 属性：值; }-->
    <!--    3. class 属性的值，可以重复-->
    <!--    4. id 是唯一的，不能重复-->
    <!--    5. 需要在 <style></style> 指定类选择器的具体样式, 前面需要是 .类选择器名称-->
    <style type="text/css">
        .class1, #id1 {
            width: 300px;
            height: 100px;
            border: 3px solid red;
        }
    </style>
</head>
<body>
<h1 class="class1">船儿很奶思</h1>
<p id="id1">hello</p>
</body>
</html>
复制代码

选择器的优先级：行内样式 > ID 选择器 > class 选择器 > 元素选择器

 

本文作者：romantichuaner

本文链接：https://www.cnblogs.com/romantichuaner/p/18213479

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   银河小船儿  阅读(14)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起