CSS 基础

文章目录

- CSS 常见的属性
- CSS 常见样式
- - 行内样式
  - 内嵌样式
  - 导入样式
- CSS 选择器
- - 标签选择器
  - id选择器
  - 类选择器
  - 全局选择器
  - 属性选择器
  - 组合选择器
- CSS 常见应用
- - 表格
  - 列表
  - 导航栏
  - 下拉菜单
  - 提示工具
  - 图片廊

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为 .css。CSS是用于控制网页样式并允许将样式信息和网页分离的一种标记语言。

该样式定义了如何显示 HTML 元素，通过使用 CSS 我们可以大大提升网页开发的工作效率！

CSS语法格式：CSS声明总是以分号 ; 结束，声明总以大括号 {}括起来:

标签名 
{
	属性名1:属性值1;
	属性名2:属性值2;
	属性名3:属性值3;
	...
}

选择器一般放在head的<style></style>元素中。

CSS 常见的属性

字体属性

font-family：设置字体类型，如font-size: “宋体”。
font-size：设置字体大小，px 为像素，em 自动使用大小，方便放大缩小字体，一般使用em，1em=16px。
font-style：设置字体风格样式，normal 为正常，italic 为倾斜，oblique 也为倾斜。
font-weight：设置字体粗细，normal 为正常，bold 为加粗，lighter 为变细。

文本属性

text-decoration：对文本进行装饰，none 为正常，overline 为上滑线，underline 为下滑线，line-through 为删除线。
text-indent：文本缩进，中文一般为2em。
text-align：对齐方式，left 为左对齐，right 为右对齐，center 居中对齐，justify 两端对齐。
text-transform：大小写字母转换，uppercase 为大写，lowercase 为小写，capitalize 为首字母大写。
direction：文本方向，rtl 为右对齐，ltr 为左对齐，也是默认值。
color：文本颜色。
letter-spacing：设置字符间距，normal 为正常，还有如2px。
word-spacing：设置单词间距，normal 为正常，还有如30px。

尺寸属性

height：设置元素的高度，默认auto，还有如100px。
width：设置元素的宽度，默认auto，还有如100px。
line-height：设置行高，默认normal，还有如200%。

背景属性

background-color：设置元素背景色。
background-size：设置背景大小。
background-image：把图像设置为背景。
- url(‘URL’) URL为图像地址。
- linear-gradient() 渐变，如linear-gradient(blue, red)为垂直从上到下渐变，linear-gradient(to right, red , yellow) 为水平从左到右渐变，linear-gradient(to bottom right, red , yellow) 为从左上角到右下角渐变。
- radial-gradient() 径向渐变，如radial-gradient(red, yellow, green)为椭圆渐变，radial-gradient(circle, red, yellow, green)为圆渐变。
background-position：设置背景的位置。
background-repeat：设置如何重复背景图像，默认repeat为水平和垂直方向重复，no-repeat不重复。
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。默认scroll为随着页面的滚动而滚动，fixed 为不会随着页面的滚动而滚动，local 为随着元素内容的滚动而滚动。

CSS 常见样式

行内样式

只能用于当前标签。可以直接在标签中添加属性style。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>行内样式</title>
</head>
<body>
<!--设置背景为红色，字体颜色为黑色，字体大小为20-->
<p style="background-color: red;color: black;font-size: 20px;">Python网络爬虫</p>
<!--设置字体颜色为蓝色，字体为italic形式-->
<p style="color: blue;font-style: italic;">Python网络爬虫</p>
</body>
</html>

内嵌样式

只能用于当前页面。内嵌样式就是在<head>标签中使用<style>标签，将所有css代码集中在一个区域中，实现了html和css代码分离，方便后期维护。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内嵌样式</title>
    <style>
        body {
            background-color: yellow;
        }
        /*格式要求一样，可以合并写，逗号分割*/
        .test1,#test2 {
            color: red;
            font-size: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="test1">Python网络爬虫</div>
<div id="test2">Python网络爬虫</div>
</body>
</html>

导入样式

可以同时作用于多个页面。

不用对每个页面写<style>标签，直接导入CSS文件即可，基本形式为：<link href=”css文件路径” type=”MIME类型” rel=”stylesheet”>。

type 参数根据格式选择，如文本”text/css”，JS为“ext/javascript“，图片为”image/jpg“，所有图片为”image/*“。

创建一个css文件，如下1.css

body {
    background-color: yellow;
}

/*格式要求一样，可以合并写，逗号分割*/
.test1, #test2 {
    color: red;
    font-size: 50px;
    text-align: center;
}

再创建html文件，导入css文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>导入样式1</title>
    <link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="test1">Python网络爬虫</div>
<div id="test2">Python网络爬虫</div>
</body>
</html>

需要写<style>标签，将css样式导入style中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>导入样式1</title>
    <style>
        /*@import url('1.css');*/
        @import "1.css";
    </style>
</head>
<body>
<div class="test1">Python网络爬虫</div>
<div id="test2">Python网络爬虫</div>
</body>
</html>

CSS 选择器

标签选择器

p {
    color: red;
    text-align: center;
}

p 为标签选择器；color 是颜色属性，red为属性值；text-align是文本位置属性，center表示居中。

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        #para1 {
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

在这里插入图片描述

ID属性不要以数字开头，数字开头的ID在浏览器中不起作用。

类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示。

.test1 {
            color: red;
            text-align: center;
        }

全局选择器

全局选择器顾名思义就是对所有标签做相同的修改，用*号显示。

* {
    color: green;
    text-align: center;
   }

属性选择器

属性选择器可以根据元素的属性及属性值来选择，两种方式，标签名[属性值]或标签名[属性名=属性值]。

p[class] {
    color: green;
    text-align: center;
   }

p[class='test1'] {
    color: green;
    text-align: center;
   }

组合选择器

常见有四种组合方式的选择器。

后代选择器(以空格分隔)
子元素选择器(以大于>号分隔）
相邻兄弟选择器（以加号+分隔）
普通兄弟选择器（以波浪号～分隔）

div p
{
  background-color:yellow;
}

div>p
{
  background-color:yellow;
}

div+p
{
  background-color:yellow;
}

div~p
{
  background-color:yellow;
}

CSS 常见应用

表格

新建一个tb.css文件，可设置如下表格样式：

/*表格边框，指定黑色边框*/
table, th, td {
    border: 1px solid black;
}

/*表格宽度和高度，设置100%宽度，50像素的th元素的高度*/
table {
    width: 100%;
}

th, td {
    height: 50px;
}

/*表格文字对齐，水平对齐，垂直对齐*/
th, td {
    text-align: right;
    height: 50px;
    vertical-align: bottom;
}

/*表格填充，控制边框和表格内容直接的间距*/
th {
    padding: 15px;
}

/*表格颜色*/
table, th, td {
    border: 1px solid green;
}
th {
    background-color: green;
    color: white;
}

再将tb.css导入到html文件中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格</title>
    <style>
        @import "tb.css";
    </style>
</head>
<body>
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
        <td>$150</td>
    </tr>
    <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td>$300</td>
    </tr>
    <tr>
        <td>Cleveland</td>
        <td>Brown</td>
        <td>$250</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

由示例可见，和之前html语法类似，只不过增加了一些css表格样式设置，页面整体看起来也更加美观。

列表

新建一个list.css文件，可设置如下列表样式：

/*圆形*/
ul.a {
    list-style-type: circle;
}
/*方形*/
ul.b {
    list-style-type: square;
}
/*罗马数字I、II*/
ol.c {
    list-style-type: upper-roman;
}
/*小写字母a、b*/
ol.d {
    list-style-type: lower-alpha;
}

再将list.css导入到html文件中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Python学习路线</title>
    <style>
        @import "list.css";
    </style>
</head>

<body>
<p>无序列表:</p>
<ul class="a">
    <li>Python基础知识</li>
    <li>Python数据分析</li>
    <li>Python网络爬虫</li>
</ul>
<ul class="b">
    <li>Python基础知识</li>
    <li>Python数据分析</li>
    <li>Python网络爬虫</li>
</ul>

<p>有序列表:</p>
<ol class="c">
    <li>Python基础知识</li>
    <li>Python数据分析</li>
    <li>Python网络爬虫</li>
</ol>
<ol class="d">
    <li>Python基础知识</li>
    <li>Python数据分析</li>
    <li>Python网络爬虫</li>
</ol>
</body>
</html>

在这里插入图片描述

导航栏

新建一个appbar.css文件，可设置如下样式：

/*固定导航条位置，头部对应top:0，尾部bottom:0*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}
/*链接左对齐*/
li {
    float: left;
}
/*设置链接颜色及样式*/
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/*鼠标移动到选项上修改背景颜色*/
li a:hover:not(.active) {
    background-color: #111;
    color: gray;
}

/*激活当前导航条实例*/
.active {
    background-color: #4CAF50;
}

再将appbar.css导入到html文件中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Skill</title>
    <style>
    @import "appbar.css";
    </style>
</head>
<body>
<ul>
    <li><a class="active" href="#Mysql">Mysql</a></li>
    <li><a href="#Python">Python</a></li>
    <li><a href="#Html">Html</a></li>
    <li><a href="#Css">Css</a></li>
    <li><a href="#Javascript">Javascript</a></li>
    <li><a href="#Java">Java</a></li>
    <li><a href="#C">C</a></li>
    <li><a href="#C++">C++</a></li>
    <li><a href="#Go">Go</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color: red">
    <h1>&nbsp;</h1>
    <h1>&nbsp;</h1>
    <h1 style="text-align: center">No permission...</h1>
    <h1>&nbsp;</h1>
    <h1>&nbsp;</h1>
</div>
</body>
</html>

在这里插入图片描述

下拉菜单

这里将css格式内嵌到html文件中，示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Skill</title>
    <style>
    /*下拉按钮样式*/
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
/*容器<div> 需要定位下拉内容*/
.dropdown {
    position: relative;
    display: inline-block;
}
/*下拉内容（默认隐藏）*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/*下拉菜单的链接*/
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
/*当下拉内容显示后修改下拉按钮的背景颜色*/
.dropdown-content a:hover {background-color: #f1f1f1}
/*在鼠标移上去后显示下拉菜单*/
.dropdown:hover .dropdown-content {
    display: block;
}
/*当下拉内容显示后修改下拉按钮的背景颜色*/
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
    </style>
</head>
<body>
<div class="dropdown">
    <button class="dropbtn">技能下拉选择</button>
    <div class="dropdown-content">
        <a href="#Python">Python</a>
        <a href="#Html">Html</a>
        <a href="#Css">Css</a>
        <a href="#Java">Java</a>
    </div>
</div>
</body>
</html>

在这里插入图片描述

提示工具

应用示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>提示工具</title>
</head>
<style>
    /* Tooltip 容器*/
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        right: 110%;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent black;
    }

    /*鼠标移动上去后显示提示框*/
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
</style>
<body style="text-align:center;">

<h2>左侧提示框/右侧箭头</h2>

<div class="tooltip">鼠标移动到我这
    <span class="tooltiptext">快来点我啊！</span>
</div>

</body>
</html>

图片廊

制作一个照片墙，鼠标移动到照片时会放大。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>照片墙</title>
</head>
<style>
    #box {
        width: 80%;
        background-color: orange;
        /*内容居中显示*/
        margin: 0 auto;
    }

    #box > img {
        width: 200px;
        height: 250px;
        margin: 30px;
        /*设置旋转的起点*/
        transform-origin: center;
        /*设置过度时间*/
        transition-duration: 2s;
        transition-property: all;
    }

    #box > img:nth-child(1){
        transform: rotate(20deg);
    }
    #box > img:nth-child(1){
        transform: rotate(20deg);
    }
    #box > img:nth-child(2){
        transform: rotate(-20deg);
    }
    #box > img:nth-child(3){
        transform: rotate(20deg);
    }
    #box > img:nth-child(4){
        transform: rotate(-20deg);
    }
    #box > img:nth-child(5){
        transform: rotate(20deg);
    }
    #box > img:nth-child(6){
        transform: rotate(-20deg);
    }
    #box > img:nth-child(7){
        transform: rotate(20deg);
    }
    #box > img:nth-child(8){
        transform: rotate(-20deg);
    }
    #box > img:hover{
        transform:rotate(30deg) scale(1.5);
        border: 1px solid #777;
    }
</style>
<body>

<div id="box">
    <img src="下午 趴在桌子的女孩4k动漫壁纸3840x216020.jpg">
    <img src="冬季雪地汉服美女4k壁纸3840x216018.jpg">
    <img src="动漫美女 鲜花 帽子 唯美 好看 4K壁纸16.jpg">
    <img src="吞噬星空4K高清壁纸10.jpg">
    <img src="宁安如梦 白鹿 古装剧照 4k壁纸17.jpg">
    <img src="银河星空一个人风景4K壁纸16.jpg">
</div>

</body>
</html>