CSS基础1

质检员-酸汤泡饭

已于 2023-12-08 00:31:25 修改

阅读量838

点赞数 22

分类专栏： CSS基础文章标签： css 前端

于 2023-12-08 00:29:41 首次发布

本文链接：https://blog.csdn.net/h88888888888/article/details/134868248

版权

CSS基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS概述

参考课程链接：https://www.icourse163.org/course/BFU-1003382003

css: Cascading Style Sheets 层叠样式表

CSS样式

HTML：网页的内容。
CSS：内容的样式。
内容和样式分离，便于修改样式。
相同的html，不同的css，不同的显示效果。

CSS语法

上面这个是标签选择器。

需要实现的效果：

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>天使投资指早期投资，尤其指个人早期投资。 </p>
    <p>
        VC Venture Capital ，所谓风险投资、创业投资，是相对靠
        前的非公开市场股权投资
    </p>
    <p>
        PE Private Equity ，所谓私募资本、非公开市场资本，既是
        私募股权投资的统称，又特指相对靠后的股权投资。
    </p>
</body>
<style>
p{
    color: blue;
    font-weight: bold;//字体粗细
    font-size: 12px;
}
</style>
</html>

注意：选择器中最后一条可以没有分号，但是为了以后修改方便，一般也加上分号。
为了使阅读更加方便，选择器中的每行代码应该写在一个新的行里面。

CSS的添加方式

行内

在行内，直接以标签的形式体现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的添加方式</title>
</head>
<body>
<!--行内-->
    <p style="color: red">
        天使投资指早期投资，尤其指个人早期投资。
    </p>
</body>
</html>

内嵌样式

可以写在head标签对里面，也可以跟在body标签对后面和标签对同级。
内嵌即和html在同一个文件里，样式集中在标签对中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的添加方式</title>
    <style type="text/css">
        p{
            color: yellow;
        }
    </style>
</head>
<body>
<!--行内-->
    <p >
        天使投资指早期投资，尤其指个人早期投资。
    </p>
</body>
</html>

注意：
内嵌的css的作用范围只在当前html起作用，即使有公共 CSS 代码，也是每个页面都要定义的。
适合文件很少，css代码也不多的情况。
如果一个网站有很多页面，每个文件都会变大，后期维护难度也大。

单独文件

页面结构HTML代码与样式CSS代码的完全分离，维护方便。
如果需要改变网站风格，只需要修改公共CSS文件。
可以在同一个HTML文档，引用多个CSS文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的添加方式</title>
    <!--link标签引入外部单文件样式表-->
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<!--行内-->
    <p>
        天使投资指早期投资，尤其指个人早期投资。
    </p>
</body>
</html>

优先级

行内样式>内嵌样式>链接样式>浏览器默认样式即就近原则
多重样式，可以覆盖

ps: pt是相对单位，px是绝对单位。

内嵌样式：

h3{
    text-align:right;
    font-size:20pt;
}

行内样式：

<h3 style="font-size:15pt">
    
</h3>

这个h3最终的样式

h3{
    font-size:15pt;
    text-align:right;/*文本对其方式*/
    color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级测试</title>
    <link href="priority.css" rel="stylesheet">
    <style type="text/css">
        h3{

            text-align:right;
            font-size:20pt;
        }
    </style>
</head>
<body>
    <h3 style="font-size: 15pt">今天是个好日子</h3>
</body>
</html>

外部样式：priority.css

h3{
    color:red;
    text-align:left;
    font-size:8pt;
}

外部的css，被引入会被内嵌的一起被整合，后面的样式会覆盖前面的样式。

CSS选择器

优先级：内联（行内） > ID选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
</head>
<body>
    <h1>标题</h1>
    <hr>
    <p>正文的段落</p>
    版权所有
</body>
<style>
    body{
        background-color: #ccc;
        text-align: center;
        font-size: 12px;
    }
    h1{
        font-size: 25px;
    }
    p{
        color: red;
        font-size: 16px;
    }
    hr{
        width: 200px;
    }
</style>
</html>

嵌套 p span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套选择器</title>
</head>
<body>
<p><span>天使投资</span>是投资方式的一种</p>
</body>
<style>
  p span{
      color: red;
  }
</style>
</html>

类别 .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
</head>
<body>
    <p class="one">类别1</p>
    <p class="one">类别1</p>
    <p class="two">类别2</p>
    <p class="two">类别2</p>
    <p>普通段落中的文字</p>
</body>
<style type="text/css">
.one{
    font-size: 18px;
}
.two{
    font-size: 24px;
}
p{
    font-size: 12px;
}
</style>
</html>

集体 p,h1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>集体选择器</title>
</head>
<body>
  <h1>欢迎访问论坛</h1>
  <p>欢迎访问论坛</p>
</body>
<style>
    h1,p{
        text-align: center;
    }
</style>
</html>

id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
</head>
<body>
    <p id="one">文字1</p>
    <p id="two">文字2</p>
</body>
<style>
/*
<!--id具有唯一性-->
 */
#one{
    font-size: 12px;
}
#two{
    font-size: 24px;
}
</style>
</html>

全局 *

全局选择器，所有的html内容都适用。
标签选择器优先于全局选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局选择器</title>
</head>
<body>
  <h1>欢迎访问论坛</h1>
  <p>欢迎访问论坛</p>
  <h2>欢迎访问论坛</h2>
</body>
<style>
    * {
        text-align:center;
    }
    h1{
        text-align: left;
    }
</style>
</html>

注：多个class选择器混用，用空格分开
<div class="one yellow left">……</div>
id和class混用
<div id="my" class="one yellow left" >
id选择器不可以多个同时使用

伪类选择器

CSS样式(1) 文本

单位

颜色

文本

属性	描述	取值
color	文本颜色	#000000 rgb(x,y,z)
letter-spacing	字符间距	2px、em、cm、pt(测测em单位可不可以，答案是可以)
line-height	行高	14px 1.5em 120%
text-align	对齐	center left right justify
text-decoration	装饰线	none overline underline line-through
text-indent	首行缩进	2em

字符间距：letter-spacing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
</head>
<body>
  <h1>标题内容</h1>
  <h2>文本段落主要内容</h2>
</body>
<style>
  h1{
      letter-spacing: 5pt;
  }
  h2{
      letter-spacing: -3pt;
  }
</style>
</html>

行高：line-height

line-heighh和height的区别，前者会垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
</head>
<body>
    <p id="one">
        这里是web前端开发课程1…
    </p>
    <hr/>
    <p id="two">
        这里是web前端开发课程2…
    </p>
</body>
<style>
#one{
    line-height: 50px;
}
#two{
    height: 50px;
    /*line-height: 50px;*/
    background-color: #cccccc;
}
</style>
</html>

对齐方式text-align和text-indent

justify：文字向两侧对齐，对最后一行无效。
left:左对齐
right: 右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
</head>
<body>
    <h1>CSS text-align 实例</h1>
    <p class="date">3 月 14 号</p>
    <p class="main">当我年轻的时候，我的想象力从没有受过限制，我梦想改变这个世界。
        当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些决定，只改变我的国家。
        当我进入暮年以后，我发现我不能改变我的国家，我的最后愿望仅仅是改变一下我的家庭，但是这也不可能。
        当我现在躺在床上行将就木，我突然意识到，如果一开始我仅仅去改变自己，然后作为一个榜样，我可能改变我的家庭，在家人的帮助和鼓励下，我可能为国家做一些事情。
        然而，谁知道呢，我甚至可能改变这个世界！</p>
</body>
<style>
h1{
    text-align: center;
}
.date{
    text-align: right;
}
.main{
    text-align: justify;
    text-indent: 2em;//首行缩进
}
</style>
</html>

装饰线：text-decoration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-decoration</title>
</head>
<body>
    <h1>标题1文字</h1>
    <h2>标题2文字</h2>
    <h3>标题3文字</h3>
</body>
<style>
    h1{
        text-decoration: overline;
    }
    h2{
        text-decoration: line-through;
    }
    h3{
        text-decoration: underline;
    }
</style>
</html>

none:没有线修饰。可以用于取消超链接的下划线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-decoration</title>
</head>
<body>
    <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
    </ul>
</body>
<style>
a{
    text-decoration: none;
}
</style>
</html>

字体

简化font

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <p>这是一段文本</p>
</body>
<style>
    p{
        background-color: gray;
        font: italic bold 15px/50px '宋体';
    }
</style>
</html>

总结

单位和颜色
文本和字体：
文本css部分属性：letter-spacing、line-height、text-align、text-decoration
字体css部分属性：font、font-style、font-weight、font-szie、font-family

CSS样式(Ⅱ)背景超链接

背景

backgroud
backgroud-color
backgroud-image
backgroud-repeat:
repeat：背景图片沿着x方向和y方向对背景区域进行填充。（bgr的默认属性）
repeat-x：背景图片沿着x方向进行填充。
repeat-y：背景图片沿着y方向进行填充。
no-repeat：背景图片在背景区域只显示一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css背景测试</title>
</head>
<body>
    <div>
        <p>这里会显示一张图片</p>
    </div>
</body>
<style>
    div{
        height: 600px;
        width: 1000px;
        background-color: red;
        background-image: url('img.png');
        background-repeat: repeat-y;
    /* 默认值是repeat */
    }
</style>
</html>

效果：背景图沿着y方向填充，不会沿着x方向填充。

超链接

链接的4种状态：

a:link 普通的、未被访问的链接。
a:visited 用户已经访问的链接。
a:hover 鼠标悬停在链接上方。
a:active 链接被点击的时刻。

a:hover必须在a:link和a:visited之后。
a:activev必须在a:hover之后。

下面这种表达其实是CSS中的伪类选择器

a:link{
    
}

下面代码：点击第一个超链接剩下的的两个超链接的颜色也会变。

原因是：:visited伪类选择器，是根据href属性来计算的。
所以只要是href值相同的超链接，只要又一个被访问，其他的超链接也会进入被访问的状态。
所以href只要属性值不同就不会有影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#" class="special-link">迪拜华商财富缩水 瞻望前景信心犹豫 </a>
    <br/>
    <a href="#" class="else">迪拜华商财富缩水 瞻望前景信心犹豫 </a>
    <br/>
    <a href="#" class="else">迪拜华商财富缩水 瞻望前景信心犹豫 </a>
<!--超链接默认就是蓝色-->
</body>
<style>
a:link{
    text-decoration: none;
    color: #09f;
}
.else:visited{
    color: #930;
}
.special-link:visited{
    color: green;
}
a:hover{
    text-decoration: underline;
    color: red;
}
a:active{
    color: #03c;
}
</style>
</html>

在下面这段css代码中，链接被点击之后，a:hover的效果还是有效的。

a:link{
    text-decoration: none;
    color: #09f;
}
a:visited{
    color: green;
}
a:hover{
    text-decoration: underline;
    color: red;
}
a:active{
    color: #03c;
}

在这段CSS中，当链接被点击之后，a:hover就无效了。
我的理解是：a:hover的优先级是低于.else:visited的。

a:link{
    text-decoration: none;
    color: #09f;
}
.else:visited{
    color: #930;
}
.special-link:visited{
    color: green;
}

a:hover{
    text-decoration: underline;
    color: red;
}
a:active{
    color: #03c;
}

但是当CSS脚本变成下面这段时：链接被点击之后超链接的hover动作仍然是有效的
对比上面的css代码段，可得类选择器的优先级是高于伪类选择器的。
.special-link:visited、.else:hover的优先级高于a:hover、.else:visited、special-link:visited。）

a:link{
    text-decoration: none;
    color: #09f;
}
.else:visited{
    color: #930;
}
.special-link:visited{
    color: green;
}
.special-link:hover{
    text-decoration: underline;
    color: red;
}
.else:hover{
    text-decoration: underline;
    color: red;
}
a:active{
    color: #03c;
}

over的优先级是低于.else:visited的。

a:link{
    text-decoration: none;
    color: #09f;
}
.else:visited{
    color: #930;
}
.special-link:visited{
    color: green;
}

a:hover{
    text-decoration: underline;
    color: red;
}
a:active{
    color: #03c;
}

a:link{
    text-decoration: none;
    color: #09f;
}
.else:visited{
    color: #930;
}
.special-link:visited{
    color: green;
}
.special-link:hover{
    text-decoration: underline;
    color: red;
}
.else:hover{
    text-decoration: underline;
    color: red;
}
a:active{
    color: #03c;
}

加群一起学习进步奥：
在这里插入图片描述

质检员-酸汤泡饭

关注

22
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
CSS基础1

参考课程链接：https://www.icourse163.org/course/BFU-1003382003HTML：网页的内容。CSS：内容的样式。内容和样式分离，便于修改样式。相同的html，不同的css，不同的显示效果。上面这个是标签选择器。需要实现的效果：实现：CSS的添加方式行内在行内，直接以标签的形式体现内嵌样式可以写在head标签对里面，也可以跟在body标签对后面和标签对同级。内嵌即和html在同一个文件里，样式集中在标签对中。单独文件页面结构HTML代码
复制链接

扫一扫