首页 > 其他分享 >初识CSS

初识CSS

时间:2024-08-01 23:54:27浏览次数:17  
标签:color 标签 初识 radius red border 选择器 CSS

文章目录

CSS是什么

CSS全称叫:层叠样式表 (Cascading Style Sheets),CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离

总的来说:

1、css控制页面的展示效果

2、html决定页面结构

基本语法规范

选择器 + {一条/N条声明}
1、选择器决定针对谁修改 (找谁)
2、声明决定修改啥(干啥)
3、声明的属性是键值对,使用 ; 区分键值对,使用 : 区分键和值

注意:
1、CSS 要写到 style 标签中(后面还会介绍其他写法)
2、style 标签可以放到页面任意位置,一般放到 head 标签内
3、CSS 使用 /* */ 作为注释(使用 ctrl + / 快速切换)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- style一般放在head中 -->
    <style>
        /* 这个是注释 */

        /* p是选择器,color等是声明 */
        p {
            /* 设置字体颜色 */
            color: red;
            /* 设置字体大小 */
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p>你好</p>
    <h1>你好</h1>
</body>
</html>

1

引入方式

内部样式表

将css嵌入到 html 页面中,写在 style 标签中,理论上来说 style 放到 html 的哪里都行,但是一般都是放到 head 标签中,这种写法不常用

**优点:**这样做能够让样式和页面结构分离
**缺点:**分离的还不够彻底,尤其是 css 内容多的时候

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- 将style放到head中 -->
    <style>
        p {
            color: red;
            font-size: 40px;
        }
    </style>
</head>

行内样式表

通过 style 属性,来指定某个标签的样式,这种写法只适合于写简单样式,针对某个标签生效,并且这种写法优先级较高,会覆盖其他的样式

缺点: 不能写太复杂的样式

<body>
    <!-- 行内优先级高 -->
    <p style="color: green;">hello world</p>
    <p>你好</p>
    <!-- 行内样式表 -->
    <h1 style="color: blue; font-size: 40px;">你好</h1>
</body>

2

外部样式

实际开发中最常用的方式

  1. 创建一个 css 文件.
  2. 使用 link 标签引入 css
<link rel="stylesheet" href="[CSS文件路径]">

**优点:**样式和结构彻底分离了
**缺点:**受到浏览器缓存影响, 修改之后 不一定 立刻生效

关于缓存:
这是计算机中一种常见的提升性能的技术手段
网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的,如果频繁访问该网站,那么这些外部资源就没必要反复从服务器获取,就可以使用缓存先存起来(就是存在本地磁盘上了),从而提高访问效率
可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件

创建html02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>外部样式引入</title>
    <!-- rel表示引入的文件是样式表,href表示路径 -->
    <link rel="stylesheet" href="./html02.css">
</head>
<body>
    <p>hello css</p>
</body>
</html>

创建html02.css

p {
    color: red;
    font-size: 40px;
}

3

代码风格

**样式大小写:**CSS不区分大小写,但开发时统一使用小写字母

**空格规范:**冒号后面带空格,选择器和 { 之间也有一个空格

选择器的种类

选择器要先选中指定的元素,才能设置元素属性

基础选择器:单个选择器构成

标签选择器

能快速为同一类型的标签选择出来,但不能差异化选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>外部样式引入</title>
    <!-- rel表示引入的文件是样式表,href表示路径 -->
    <link rel="stylesheet" href="./html02.css">
</head>
<body>
    <p>hello css</p>
    <p>hello html</p>
    <p>hell JavaScript</p>
    <h2>这是h2标题</h2>
</body>
</html>
p {
    color: red;
    font-size: 40px;
}

4

类选择器

差异化表示不同标签,多个标签可以使用统一标签

类名用 . 开头的,下方的标签使用 class 属性来调用,一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让
代码更好复用),如果是长的类名,可以使用 - 分割,不要使用纯数字、中文以及标签名来命名类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="./html03.css">
</head>
<body>
    <!-- class命名类名 -->
    <p class="eat">吃饭</p>
    <p class="sleep">睡觉</p>
    <!-- 多个类名要使用空格分割 -->
    <!-- 可以多个命名,从而进行样式叠加,如果出现同一样式多个声明,以最后的声明定义生效 -->
    <p class="typing code">打代码</p>
</body>
</html>
/* .开头,接class类名 */
.eat {
    color: red;
}

.sleep {
    color: green;
}

.code {
    color: blue;
}

.typing {
    color: red;
    font-size: 40px;
}

5

id选择器

在CSS 中使用 # 开头表示 id 选择器,id 选择器的值和 html 中某个元素的 id 值相同,html 的元素 id 不必带 #,id 是唯一的,不能被多个标签使用 (是和 类选择器 最大的区别)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="./html03.css">
</head>
<body>
    <p id="front">前端开发</p>
    <p id="server">后端开发</p>
</body>
</html>
/* #开头,接id名字 */
#front {
    color: red;
}

#server {
    color: green;
}

6

通配符选择器

使用 * 的定义,不需要被页面结构调用,选取所有的标签,主要用来争对页面中所有元素默认样式进行消除,主要用来消除边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="./html03.css">
</head>
<body>
    <p id="haha">哈哈哈哈</p>
    <p id="fr">前端开发</p>
</body>
</html>
#haha {
    color: red;
}

/* *开头,接花括号 */
* {
    background-color: beige;
}

7

小结

作用特点
标签选择器能选出所有相同标签不能差异化选择
类选择器能选出一个或多个标签根据需求选择,最灵活,最常用
id选择器能选出一个标签同一个id在一个HTML中只能出现一次
通配符选择器选出所有标签特殊情况下使用

复合选择器:把多种基础选择器综合运用起来

后代选择器

又叫包含选择器,选择某个父元素中的某个子元素

样式:元素1 元素2 {样式声明}

元素 1 和 元素 2 要使用空格分割
元素 1 是父级,元素 2 是子级,只选元素 2,不影响元素 1

<!-- 修改ol的颜色,不改变ul的颜色 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 会全部变颜色 */
        /* li {
            color: red;
        } */
        /* 后代选择器 */
        /* 方法1:类名 */
        /* .red {
            color: red;
        } */
        /* 方法2:修改ol中的li */
        /* ol li {
            color: red;
        } */
        /* 方法3:组合选择器 */
        /* .hobby li {
            color: red;
        } */
        /* 方法4:爷爷和孙子 */
        ol a {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打代码</li>
    </ul>
    <ol class="hobby">
        <li class="red">吃饭</li>
        <li class="red">睡觉</li>
        <li class="red">
            <a href="#">打代码</a>
        </li>
    </ol>
</body>
</html>

8

伪类选择器

用来定义元素状态

链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

如何让一个已经被访问过的链接恢复成未访问的状态?
清空浏览器历史记录即可,快捷键为:ctrl + shift + delete

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        a {
            color: black;
        }
        /* 选择鼠标指针悬停上的链接 */
        a:hover {
            color: red;
        }
        /* 选择活动链接(鼠标按下了但是未弹起) */
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">不跳转</a>
</body>
</html>

9

:force 伪类选择器

选取获取焦点的 input 表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 被选中的表单的字体就会变成红色 */
        .three>input:focus {
            color: red;
        }
    </style>
</head>
<body>
    <div class="three">
        <input type="text"><br>
        <input type="text"><br>
        <input type="text"><br>
        <input type="text">
    </div>
</body>
</html>

10

小结

选择器作用
后代选择器选择后代元素,可以是孙子元素
链接伪类选择器选择不同状态的链接
:force 伪类选择器选择被选中的元素

更多选择器的学习可以通过以下链接进行学习:

CSS 选择器参考手册 (w3school.com.cn)

常见元素属性

元素有很多,不用硬背,借助参考文档学习:CSS 参考手册 (w3school.com.cn)

字体属性

font-family:设置字体

font-size:字体大小

font-weight:字体粗细

normal:默认值

bold:粗体

bolder:更粗的字体

lighter:更细的字体

100(数字):数字越大越粗

inherit:从父元素继承字体

font-style:字体倾斜度

normal:默认值,不倾斜

italic:斜体

oblique:倾斜字体

inherit:从父元素继承字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        div {
            /* 如果字体相关修改写错的话,会显示默认的大小 */
            /* 字体修改可以写中文,但不推荐 */
            font-family: '宋体';
            /* 字体大小 */
            font-size: 40px;
            /* 字体粗细 */
            font-weight:700;
            /* 字体样式 */
            font-style: italic;
        }
    </style>
</head>
<body>
    <div>这是宋体</div>
</body>
</html>

11

文本属性

color:设置字体颜色

预定义的颜色值:直接是单词
(最常用) 十六进制形式:每两位表示一种三原色(可以简写成3个16进制数),三原色顺序为红绿蓝,数字越大颜色越深

RGB 方式:和十六进制形式一样,变成3个 0-255 的值

text-align:控制文字水平方向对齐

center: 居中对齐
left: 左对齐
right: 右对齐

text-decoration:表示文本装饰

underline 下划线 [常用]
none 啥都没有,可以给 a 标签去掉下划线
overline 上划线 [不常用]
line-through 删除线 [不常用]

text-indent:控制文本缩进

单位可以使用 px 或者 em
使用 em 作为单位更好,1 个 em 就是当前元素的文字大小
缩进可以是负的,表示往左缩进(会导致文字就冒出去了)

line-height:表示行高,上下文之间的基线距离

行高 = 上边距 + 下边距 + 字体大小

行高也可以取 normal 等值

行高等与元素高度,就可以实现文字居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        .color {
            font-size: 40px;
            /* 直接写颜色名称 */
            color: red;
            /* 16进制表示颜色,两位表示一种三原色(可以简写成3个16进制数) */
            /* 表示的颜色顺序为红绿蓝,数字越大颜色越深 */
            color: #0000ff;
            /* 和上面的表示方法是一样的 */
            color: rgb(0, 255, 0); 
        }
        h1 {
            text-align: left;
            text-decoration: overline;
        }
        h2 {
            text-align: center;
            text-decoration: line-through;
        }
        h3 {
            text-align: right;
        }
        p {
            text-indent: 2em;
            text-decoration: underline;
            line-height: 50px;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="color">这是文本属性</div>
    <h1>靠左</h1>
    <h2>居中</h2>
    <h3>靠右</h3>
    <!-- lorem 可以生成一大串文字 -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo perspiciatis sunt molestiae porro cum quaerat tempore neque, voluptatibus dolorem ipsam vero at quam praesentium. Labore, atque? Aperiam a asperiores libero?</p>
    <a href="#">不跳转</a>
</body>
</html>

13
12

背景属性

背景颜色和图片:

background-color:设置背景颜色

background-image: url(……):设置背景图片

比 image 更方便控制位置(图片在盒子中的位置)
注意:

url 不要遗漏,url 可以是绝对路径,也可以是相对路径,url 上可以加引号,也可以不加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        /* 全局换背景色 */
        body {
            background-color: #6fb7e7e7;
        }
        /* 添加div的背景图片 */
        div {
            font-size: 40px;
            background-image: url(./img.png);
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div>
        这是我学习背景属性
    </div>
</body>
</html>

14

background-repeat:设置背景平铺方式

重要取值:
repeat:平铺(默认)
no-repeat:不平铺
repeat-x:水平平铺
repeat-y:垂直平铺
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

<!-- 在上述代码的基础上修改 -->
<style>
    /* …… */
    div {
        font-size: 40px;
        /* background-image: url(./img.png); */
        background-image: url(../Html/female.png);
        background-repeat: repeat-y;
        width: 700px;
        height: 400px;
    }
</style>

15

background-position:修改背景图片的位置

参数有三种风格:

  1. 方位名词: (top, left, right, bottom)

  2. 精确单位: 坐标或者百分比(以左上角为原点)

  3. 混合单位: 同时包含方位名词和精确单位

    关于坐标系:
    计算机中的平面坐标系, 一般是左手坐标系

    16

<style>
    /* …… */
    div {
        /* …… */
        /* 设置背景图片位置 */
        /* 坐标 */
        background-position: 200px 200px;
        /* 方位名词 */
        background-position: top;
        /* 混合 */
        background-position: 100px center;
    }
</style>

17

background-size:设置背景尺寸

1、可以填具体的数值:如 40px 60px 表示宽度为 40px,高度为 60px
2、可以填百分比:按照父元素的尺寸设置.
3、cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4、contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

    <style>
        /* …… */
        div {
            /* …… */
            /* 设置背景图片尺寸 */
            /* 具体数值 */
            background-size: 700px 400px;
            /* cover */
            background-size: cover;
            /* contain */
            background-size: contain;
        }
    </style>

18

圆角矩形

通过 border-radius 使边框带圆角效果

border-radius: length(length 是内切圆的半径,数值越大,弧线越强烈)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角矩形</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            border: 2px red solid;
            /* 圆角矩形 */
            border-radius: 20px;
            /* 生成圆角矩形 */
            /* 让 border-radius 的值为矩形高度的一半即可 */
            border-radius: 100px;
            /* 也可以用百分比表示 */
            border-radius: 50%;

            /* 生成圆形 */
            width: 200px;
            height: 200px;
            /* 让 border-radius 的值为正方形宽度的一半 */
            border-radius: 100px;

            /* 展开写法,对四个角分别设置 */
            border-top-left-radius:10px;
            border-top-right-radius:20px;
            border-bottom-right-radius:30px;
            border-bottom-left-radius:40px;
            /* 等价于(顺时针排列) */
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

rder: 2px red solid;
/* 圆角矩形 /
border-radius: 20px;
/
生成圆角矩形 /
/
让 border-radius 的值为矩形高度的一半即可 /
border-radius: 100px;
/
也可以用百分比表示 */
border-radius: 50%;

        /* 生成圆形 */
        width: 200px;
        height: 200px;
        /* 让 border-radius 的值为正方形宽度的一半 */
        border-radius: 100px;

        /* 展开写法,对四个角分别设置 */
        border-top-left-radius:10px;
        border-top-right-radius:20px;
        border-bottom-right-radius:30px;
        border-bottom-left-radius:40px;
        /* 等价于(顺时针排列) */
        border-radius: 10px 20px 30px 40px;
    }
</style>
```

19

标签:color,标签,初识,radius,red,border,选择器,CSS
From: https://blog.csdn.net/wrrtx/article/details/140859986

相关文章

  • 【虚幻UE5教程】第一章 基础知识——第三节 初识蓝图
    【虚幻UE5教程】第一章基础知识——第三节初识蓝图(Blueprint)往期目录第一章基础知识第一节编辑器页面第二节搭建关卡第三节初识蓝图进阶篇关卡流送(LevelStreaming)本文目录【虚幻UE5教程】第一章基础知识——第三节初识蓝图(Blueprint)往期目......
  • Java初识
    JDK、JRE和JVM​1.JDK指的是JavaDevelopmentKit,它是一个开发Java应用程序所需的软件开发工具包。JDK包括Java编译器、Java虚拟机、Java类库等必要组件,以及用于开发、调试和运行Java应用程序的其他工具。使用JDK可以帮助开发人员编写、测试和部署Java应用程序,以及运行Java应......
  • 信步漫谈之ZAP扫描工具——初识
    目录1OWASP2ZAP3ZAP的工作原理4ZAP的下载地址5ZAP的安装使用1OWASPOWASP是一个开源的、非盈利的全球性安全组织,致力于应用软件的安全研究。OWASP被视为web应用安全领域的权威参考。美国联邦贸易委员会(FTC)强烈建议所有企业需遵循OWASP十大WEB弱点防护守则。OWASP颁布......
  • css 文字边框
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>OpacityFadeAnimation</titl......
  • 《CSS创意项目实战指南》:点亮网页,从实战中掌握CSS的无限创意
    CSS创意项目实战指南在数字时代,网页不仅是信息的载体,更是艺术与技术的融合体。通过CSS,你可以将平凡的网页转变为引人入胜的视觉盛宴,让用户体验跃升至全新高度。《CSS创意项目实战指南》正是这样一本引领你探索CSS无限可能的实战宝典。一、启航CSS创意之旅本书精心设计了12......
  • css标签样式
    //绿色.text{background-color:#06a18d;color:#fff;letter-spacing:0;line-height:16px;padding:02px;text-align:center;position:absolute;width:50px;height:20px;line-height:20px;top:-15px;right:-240px;border-......
  • css各种使用案例合集(二)
    1、hover动画场景1:要求有旋转、变色,有变化过程场景结果:代码示例:<divclass="box"><divclass="headUp"></div><divclass="head"></div><divclass="mouth"><divclass="eye"><......
  • css实现图片等比例完全展示,背景加图片 130%放大虚化
    html<divclass="img-box"><divclass="img"></div><divclass="img-bg"></div></div>css.img-box{width:100%;height:212px;.img{backgrou......
  • css动画-卡片滚动效果
    动画效果效果如下:当卡片进行左右滚动时,每次都恰好滑动出来下一个卡片,将下一个卡片完整的展现在容器中间。核心代码1.设置容器和卡片的样式.wrapper{display:flex;gap:20px;width:300px;margin:100pxauto;overflow-x:scroll;}......
  • 界面控件DevExpress WinForms,支持HTML & CSS提升用户体验(一)
    DevExpressWinForms现在可以利用HTML/CSS强大的功能,帮助受DevExpress驱动的WinForms应用程序引入现代的UI元素和用户体验!P.S:DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应......