css基础-1

于 2021-08-18 18:26:34 发布
阅读量258 收藏
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59938047/article/details/119784269
版权

1.什么是css?

css指层叠样式表(Cascading Style Sheets)。

css定义如何显示html元素样式。

2.css的作用？

进一步控制网页中html元素具体的显示样式，让网页变得更好看。

3.在HTML网页中如何使用css?

3.1内联定义 (Inline Styles)

内联定义即是在[html]的元素/标记/标签的内部使用对象的style属性定义适用其的样式表属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>内联定义</h1>
    <h3>在html元素的开始标记使用 &lt;style&gt; 属性定义当前html元素样式</h3>
    <h2>举例</h2>
    <h3 style="color: blue;font-size: 15px;background-color: darkkhaki;width: 300px;height: 100px;">测试内联定义</h3>
</body>

</html>

缺点:当我们给一个html标记设置很多样式的时候，这个HTML标记就会变得很长，以后修改起来不方便。

适合于样式定义较少的情况。

内联定义一般使用较少。

 3.2内部样式块 (Embedding a Style Block)

就是在<head></head>中添加<style></style>标记来设置html元素的样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h4 {
            color: darkturquoise;
            background-color: black;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1>内部样式块</h1>
    <h3>定义：在&lt;head&gt;在&lt;/head&gt;中添加在&lt;style&gt;在&lt;/style&gt;标记来设置html元素的样式</h3>
    <h4>测试内部样式块1</h4>
    <h4>测试内部样式块2</h4>
    <h3>缺点：设置的样式过多时会造成head标签显得很多</h3>
</body>

</html>

 3.3链入外部样式表文件 (Linking to a Style Sheet)

先建立外部样式表文件（.css），然后使用HTML的link标记，将外部样式表文件（.css）导入进当前的html文件中。

第一步：建立外部样式表文件（.css）

第二步：在html的head标记中使用link标记导入样式文件。

<link rel=stylesheet href="样式文件的路径" type="text/css">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="mycss.css">
</head>

<body>
    <h1>链入外部样式表</h1>
    <h3>适用于样式较多时</h3>
    <p>步骤一：建立外部样式表文件（.css）</p>
    <p>步骤二：在html的head标记中使用link标记导入样式文件</p>
    <h3></h3>
</body>

</html>

当我们需要大量的css样式设置是使用这种方式，这种方式可以做到html与css的分离控制。

我们往往使用最多的就是第2种和第3种方式。

4.CSS语法

CSS 语法规则由两个主要的部分构成：选择器和一条或多条声明【具体样式设置】

选择器通常是您需要改变样式的 HTML 元素。

每条声明是由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束，声明总以大括号({})括起来.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            h3 {
            color: chartreuse;
            background-color: rgb(27, 27, 25);
            width: 450px;
        }
    </style>
</head>

<body>
    <h1>css语法</h1>
    <h3>由两部分构成，css选择器+设置的属性和属性值</h3>
    <h3>样式设置用"{}"</h3>
    <h3>每个属性都有一个属性值，属性与属性值用":"分开</h3>
    <h3>设置多个样式用";"分开</h3>
</body>

</html>

5.CSS 注释

注释是用来解释代码，提高可读性，不会被浏览器读取。

css注释可以注释多行，但不能被嵌套。

css注释只能注释在css上，不能注释在html元素上

CSS注释以 /* 开始, 以 */ 结束,

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: yellow;
            /*字体颜色为黄色*/
        }
    </style>
</head>

<body>
    <h1>css注释</h1>
    <h4>注释是用来解释代码，提高可读性</h4>
    <h4>不会被浏览器读取</h4>
    <h4>css注释可以注释多行，但不能被嵌套</h4>
    <h4>css注释只能注释在css上，不能注释在html元素上</h4>
    <h4>/*要注释的内容*/</h4>
</body>

</html>

6.CSS选择器

ss选择器</h1>

   作用：得到需要改变样式的html元素。

常用css选择器

1.元素选择器

2.id选择器

3.class选择器

4.包含选择器

5.子元素选择器

6.属性选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>css选择器</h1>
    <h3>作用：得到需要改变样式的html元素</h3>
    <h3>常用css选择器</h3>
    1.元素选择器<br>
    2.id选择器<br>
    3.class选择器<br>
    4.包含选择器<br>
    5.子元素选择器<br>
    6.属性选择器
</body>

</html>

6.1元素选择器

 元素选择器--根据html元素的名称得到需要设置样式的html元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 35ox;
            background-color: black;
            color: white;
            width: 200px;
        }
    </style>
</head>

<body>
    <h1>元素选择器</h1>
    <h3>根据HTML元素的名称得到需要设置样式的HTML元素</h3>
    <p>测试元素选择器1</p>
    <p>测试元素选择器2</p>
    <p>测试元素选择器3</p>

</body>

</html>

6.2id选择器 

 id选择器--根据html元素的id属性值得到需要设置样式的html元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a1 {
            color: yellow;
            background-color: blue;
            width: 250px;
        }
        
        #a2 {
            color: blue;
            background-color: yellow;
        }
        
        #a3 {
            background-color: teal;
            width: 300px;
            height: 50px;
        }
    </style>
</head>

<body>
    <h1>id选择器</h1>
    <h3>根据html元素的id属性值得到需要设置样式的html元素</h3>
    <p id="a1">测试id选择器5</p>
    <p id="a2">测试id选择器6</p>
    <p id="a1">测试id选择器7</p>
    <p id="a3">测试id选择器8</p>

</body>

</html>

 6.3class 选择器

class 选择器--根据html元素的class属性值得到需要设置样式的html元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .A {
            color: tomato;
        }
        
        .B {
            width: 150px;
            background-color: tomato;
        }
    </style>
</head>

<body>
    <h1>class选择器</h1>
    <h3>根据html元素的class属性值得到需要设置样式的html元素</h3>
    <h3>在样式文件中用.表示class属性</h3>
    <p class="A">测试class选择器</p>
    <p class="B">测试class选择器</p>
    <p class="A">测试class选择器</p>
    <p class="B">测试class选择器</p>
</body>

</html>

 6.4包含选择器

包含选择器--得到所有被父元素包含的子元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a {
            background-color: tomato;
            width: 300px;
        }
        
        #b {
            background-color: black;
            color: coral;
        }
        
        #a p {
            color: darkblue;
        }
    </style>
</head>

<body>
    <h1>包含选择器</h1>
    <h3>得到所有被父元素包含的所有子元素</h3>
    <div id="a">
        <p>id="a"的子元素</p>
        <div id="b">
            id=a的子元素
            <p>id="a"的孙子元素</p>
        </div>
    </div>

</body>

</html>

 

 6.5子元素选择器

子元素选择器--得到指定父元素的直接子元素，而不是所有子元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a0>p {
            background-color: lawngreen;
        }
    </style>
</head>

<body>
    <h1>子元素选择器</h1>
    <h3>得到指定父元素的直接子元素，而不是所有子元素</h3>
    <div id="a0">
        <p>id="a0"的子元素</p>
        <div id="a1">
            <p>id="a1"的孙子元素</p>
        </div>
    </div>

</body>

</html>

6.6属性选择器 

属性选择器--根据html元素的设置的属性名称得到需要设置样式的html元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[target] {
            color: lawngreen;
        }
    </style>
</head>

<body>
    <h1>属性选择器</h1>
    <h3>根据html元素的设置的属性名称得到需要设置样式的html元素</h3>
    <a href="https://www.baidu.com/" target="_blank">百度</a>
    <a href="5-1.html">5-1</a>
    <a href="9-1.html">9-1</a>

</body>

</html>

 7.CSS伪类

 CSS伪类是用来添加一些选择器的特殊效果。

:link

a:link

选择所有未访问链接

:visited

a:visited

选择所有访问过的链接

:active

a:active

选择正在活动链接

:hover

a:hover

把鼠标放在链接上的状态

:focus

input:focus

选择元素输入后具有焦点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: lawngreen;
            background-color: black;
        }
        
        a:visited {
            color: rgb(59, 57, 175);
            background-color: rgb(238, 207, 207);
        }
        
        a:active {
            color: red;
            background-color: cornsilk;
        }
        
        a:hover {
            color: yellow;
            background-color: mediumspringgreen;
        }
    </style>
</head>

<body>
    <h1>测试伪类</h1>
    <p><a href="1-1.html">1-1</a></p>
    <p><a href="2-1.html">2-1</a></p>
    <p><a href="3-1.html">3-1</a></p>
    <p><a href="4-1.html">4-1</a></p>
</body>

</html>

大大126
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端CSS基础-常规流练习.rar
04-09
本资源"前端CSS基础-常规流练习.rar"聚焦于一个核心概念：常规流布局，这是HTML页面中最基础的布局方式。理解并熟练掌握常规流布局对于任何前端开发者来说都是至关重要的。 常规流（Normal Flow）是CSS布局的基础，...
HTML5与CSS3学习笔记【第八章 操作样式表】
luminous-烁的博客
07-09 685
在开始定义样式表之前，要知道如何创建和使用包含这些样式表的文件。在本章中，你将学习如何创建样式表文件，如何将 CSS应用到多个网页（包括整个网站）、单个页面或单独的 HTML 元素。我们会通过三种方法实现这些应用：外部样式表（首选方法）、嵌入样式表和内联样式（最不可取的方法）。...
2021.01.20css样式表的建立
m0_54087529的博客
01-20 142
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 选择器（声明） */
css设置各种中文字体如雅黑、黑体、宋体、楷体等等
A2830563的专栏
11-12 7547
这篇文章主要介绍了css如何设置各种中文字体如雅黑、黑体、宋体、楷体等等，需要的朋友可以参考下 代码如下: .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }  说明：  加上中文名“微软雅黑”是为了兼容opera。  Microsof
CSS创建（样式表引入）
fjnjxr的博客|PHP每周一贴
03-22 619
一、如何插入样式表 1.外部样式表 2.内部样式表 3.内联样式 二、外部样式表详解 每个页面使用标签链接到样式表，标签在（文档的）头部。 浏览器会从文件mystyle.css中读到样式声明，并格式化文件。 外部样式表mystyle.css注意事项 1、文件不能包含任何html标签。 2、样式表应该以.css扩展名进行保存 3、不要再属性值和单位之间留有空格
CSS初步--定义和应用样式
RainMcCom的博客
11-06 1054
定义和应用样式 CSS样式由一条或多条以分号隔开的样式声明组成，每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。 例如：background-color:grey; color:white。1.使用元素内嵌方式：使用全局属性style将样式应用到具体的某些元素上去。例如：<a title="测试内容" href="http://www.baidu.com" style="backgro
CSS基础-介绍及语法
11-22
CSS基础-介绍及语法，css入门必备资料
CSS基础知识-1.pdf
10-30
### CSS基础知识解析 #### 一、CSS简介 - **1.1 HTML的局限性** HTML是一种用于构建网页内容的标准标记语言。它主要用于定义网页内容的结构和意义，例如使用`<h1>`标签来表示一级标题，使用`<p>`标签来表示段落...
HTML-CSS结合-基础讲解2022优秀文档.ppt
11-14
HTML 和 CSS 是构建网页设计的基础，它们的结合使得开发者能够创建功能丰富且视觉美观的网页。下面我们将深入探讨这两个核心技术。 XHTML 部分： XHTML，即 Extensible Hypertext Markup Language，是 HTML 的一个...
HTML---CSS----基础知识及代码----各种小程序网页设计
04-09
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是前端开发中的基础核心技术，它们共同构建了网页的结构和样式。在这个“HTML---CSS----基础知识及代码----各种小程序网页设计”主题中，我们将...
CSS 样式书写规范(推荐)+CSS布局实例（详解）
笑桐笔记的博客
04-09 3475
CSS 样式书写规范(推荐)编码设置采用 UTF-8 编码，在 CSS 代码头部使用：@charset "utf-8";注意，必须要定义在 CSS 文件所有字符的前面（包括编码注释），@charset 才会生效。例如，下面的例子都会使得 @charset 失效：/* 字符编码 */ @charset "utf-8"; html, body { height: 100%; } @charset ...
JavaScript特性（attribute）、属性（property）和样式（style）
weixin_33974433的博客
11-07 223
最近在研读一本巨著《JavaScript忍者秘籍》，里面有一篇文章提到了这3个概念。 书中的源码可以在此下载。我将源码放到了线上，如果不想下载，可以直接访问在线网址，修改页面名就能访问到相应示例代码。   一、DOM特性和DOM属性 attribute（特性），是我们赋予某个事物的特质或对象，attribute是HTML标签上的特性，它的值只能够是字符串 property（属性），是...
解决修改 Style Attributes 不起作用的问题
热门推荐
Dream It Possible
10-31 1万+
今天新建一个项目时遇到了一个问题，项目中大部分 Activity theme 需要显示 ActionBar，个别页面根据业务不需要显示。 需求很简单，直接定义 AppTheme 作为 Application 的基础样式，再定义一个子样式 AppTheme.NoTitle，修改为无 ActionBar 即可。 问题代码 AndroidManifest.xml 部分代码： &amp;lt;manifest ...
在vue中使用flexible响应式布局——默认html字体大小（font-size)是54px的问题
刘大白的白白的博客
07-13 6997
rem响应式布局中，最著名的就是淘宝出品的flexible，马上到新公司，听经理说会有大屏幕展示，所以周末研究一下。 先使用命令创建一个vue项目 vue init webpack 项目名称 安装flexible npm install lib-flexible --save vscode中，安装cssrem插件，在样式输入px为单位的数值时，提示信息中就有计算好的rem属性，非常方便。 但...
前端分析-202307110039
最新发布
07-29
前端分析-202307110039
Oracle中文基础PPT
07-29
Oracle中文基础PPT 虽然是10g，但是学习Oracle，10g版本没问题 Less01_DB_Architecture_MB3.ppt Less02_Installation_MB3.ppt Less03_DB_DBCA_MB3.ppt Less04_Instance_TB3.ppt Less05_Storage_TB3.ppt Less06_Users_MB3.ppt Less07_Schema_TB3.ppt Less08_Data_TB3.ppt Less09_Undo_TB3.ppt Less10_Security_MB3.ppt Less11_Network_MB3.ppt Less12_ProactiveM_MB3.ppt Less13_Performance_TB3.ppt Less14_BR_Concepts_MB3.ppt Less15_Backups_TB3.ppt Less16_R
【创新未发表】Matlab实现粒子群优化算法PSO-Kmean-Transformer-BiLSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
Java项目：基于SSM框架实现的公务员培训机构管理系统【ssm+B/S架构+源码+数据库+开题+任务书+毕业论文】
07-29
一、项目简介 本项目是一套基于SSM框架实现的公务员培训机构管理系统 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值 二、技术实现 jdk版本：1.8 及以上 ide工具：IDEA或者eclipse 数据库: mysql5.7 后端：spring+springmvc+mybatis+maven+mysql 前端：jsp，css，js 三、系统功能 系统登录角色包括管理员、考生、在职公务员 后台主要功能包括： 个人中心 修改密码 个人信息 在职公务员管理 考生管理 管理员信息 讲师管理 备考课程管理 基础数据管理 单位管理 公告类型管理 课程类型管理 在职培训课程管理 公告管理 轮播图管理等功能 前台主要功能包括： 用户登录 用户注册 首页 备考课程展示 课程详情 立即预订 讲师展示 公告信息 个人中心 备考课程预订 在职培训课程预订 余额充值 在职培训课程 跳转到后台等功能
Auto.js应用管理大师：自动化安装与卸载的艺术
07-29
Auto.js 是一个基于 JavaScript 的自动化脚本工具，主要用于 Android 平台。它允许用户编写脚本来自动执行一系列操作，如模拟点击、滑动、输入文本、读取和设置系统设置等。Auto.js 的目标是简化 Android 设备上的自动化任务，让用户能够通过编写脚本来实现自定义的自动化流程。 以下是 Auto.js 的一些主要特点： 1. **跨平台**：虽然主要针对 Android，但 Auto.js 也可以在其他支持 JavaScript 运行环境的平台上使用。 2. **易学易用**：如果你熟悉 JavaScript，那么学习 Auto.js 会相对容易，因为它使用类似的语法。 3. **丰富的API**：Auto.js 提供了丰富的 API，可以访问设备的许多功能，如文件系统、剪贴板、通知、网络等。 4. **社区支持**：Auto.js 拥有一个活跃的社区，用户可以在社区中分享脚本、解决问题和获取帮助。 5. **可扩展性**：用户可以根据自己的需要编写和分享自定义模块，以扩展 Auto.js 的功能。 6. **自动化任务**：Auto.js 可以用来自动化
CSS基础知识：Z-index与定位详解
在学习CSS基础知识的过程中，了解Z-index空间位置是非常关键的一环。Z-index属性用于控制定位元素在三维空间中的堆叠顺序，这个三维空间可以想象为一个x-y轴平面加上一个垂直于该平面的z轴。当元素在页面上重叠时，z...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值