菜单 搜索
首页 前端知识 CSS基础1

CSS基础1

2024-05-30 10:05:48 前端知识 前端哥 240 721 我要收藏

CSS概述

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

css: Cascading Style Sheets 层叠样式表

CSS样式

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

CSS语法

image-20231207092432242
上面这个是标签选择器。

需要实现的效果：
image-20231207092550474

实现：

<!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，被引入会被内嵌的一起被整合，后面的样式会覆盖前面的样式。
image-20231207111516757

image-20231207111543933

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) 文本

目录：

  1. 单位与颜色
  2. text
  3. font

eg:

p{
    font-size:12px; 
    color:blue; 
    font-weight:bold; 
}

单位

image-20231207143132710

颜色

image-20231207143259597

文本

​

属性描述取值
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>

image-20231207144814876

行高：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>

image-20231207154511349

装饰线：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>

image-20231207153539304

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>

image-20231207153842476

字体

image-20231207154639189

简化font

image-20231207154912839

<!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>

image-20231207155419824

总结

  1. 单位和颜色
  2. 文本和字体：
    文本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方向填充。

image-20231207214634316

超链接

链接的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;
}

但是当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;
}

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/10083.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

JQuery-JavaScript代码库-遍历篇—我耀学IT

2024-06-06 00:06:31

html()和text()和val()方法、attr()和prop()方法

2024-06-06 00:06:08

用点jquery实现的登录页面

2024-06-06 00:06:07

如何在textarea中插入提示文本

2024-06-06 00:06:06

echarts-锥型柱状图

2024-06-06 00:06:05

echarts的使用

2024-06-06 00:06:00

Vue Echarts实现中国疫情地图

2024-06-06 00:06:59

vue项目中使用echarts和china.js实现中国地图

2024-06-06 00:06:56

echarts地图移动缩放卡顿问题

2024-06-06 00:06:56

Vue 开发中的一些问题简单记录，Cannot find module ‘webpack/lib/RuleSet‘

2024-06-06 00:06:49

大家推荐的文章
1

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
2

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
3

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
4

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
5

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
6

UE4.27支持HTML5

2024-05-07 13:05:261000
7

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
8

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
9

jQuery事件处理

2024-03-12 01:03:321000
10

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！