本溪网站设计,google adwords关键词工具,企业建设营销型网站的目的有,国内快速建站1.❤️❤️前言~#x1f973;#x1f389;#x1f389;#x1f389; Hello, Hello~ 亲爱的朋友们#x1f44b;#x1f44b;#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章#xff0c;请别吝啬你的点赞❤️❤️和收藏#x1f4d6;#x1f4d6;。如果你对我的…1.❤️❤️前言~ Hello, Hello~ 亲爱的朋友们这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章请别吝啬你的点赞❤️❤️和收藏。如果你对我的内容感兴趣记得关注我以便不错过每一篇精彩。 当然如果在阅读中发现任何问题或疑问我非常欢迎你在评论区留言指正️️。让我们共同努力一起进步 加油一起CHIN UP 个人主页E绵绵的博客 所属专栏 1. JAVA知识点专栏 深入探索JAVA的核心概念与技术细节 2.JAVA题目练习 实战演练巩固JAVA编程技能 3.c语言知识点专栏 揭示c语言的底层逻辑与高级特性 4.c语言题目练习 挑战自我提升c语言编程能力 5.Mysql数据库专栏 了解Mysql知识点提升数据库管理能力 6.html5知识点专栏 学习前端知识更好的运用它 7. css3知识点专栏 在学习html5的基础上更加熟练运用前端 持续更新中敬请期待❤️❤️ 2. CSS语法 headstyle选择器{属性名属性值;属性名属性值;}/style
/head选择器要修饰的对象东西属性名修饰对象的哪一个属性样式属性值样式的取值 在前端开发中单引号和 双引号在大多数情况下是没有功能上的区别的它们都可以用来表示字符串 无论是在 HTML 属性、CSS 样式或 JavaScript 中使用单引号和双引号的效果基本相同 css和html不分大小写JavaScript 区分大小写。 3.选择器 选择器分为 基础选择器 和 复合选择器 两个大类我们这里先讲解一下基础选择器 基础选择器是由单个选择器组成的基础选择器包括 标签选择器、类选择器、id选择器和通配符选择器 标签选择器 标签选择器(元素选择器)是指用HTML标签名称作为选择器按标签名称分类为页面中某一类标签指定统一的 CSS 样式。 作用 标签选择器可以把某一类标签全部选择出来比如所有的div标签和所有的span标签 优点 能快速为页面中同类型的标签统一设置样式 缺点 不能设计差异化样式只能选择全部的当前标签 !DOCTYPE html
htmlheadstyle/* 使用标签选择器对 p 标签应用样式 */p {color: blue;font-size: 18px;}/style
/headbodyp这是一个段落。/pp这是另一个段落。/p/body/html 类选择器 CSS 中的类选择器用于选取具有特定类名的 HTML 元素。类选择器在 CSS 中使用一个点号.后跟类名来定义。 !DOCTYPE html
htmlheadstyle/* 定义一个类选择器选取 class 为 .highlight 的元素 */.highlight {background-color: yellow;font-weight: bold;}/style
/headbodyp classhighlight这个段落有一个高亮的背景。/pp这个段落没有高亮。/pp classhighlight这个段落也有高亮。/p/body/html 一个标签元素可以同时拥有多个类但必须使用空格分隔
!DOCTYPE html
htmlheadstyle.highlight {background-color: yellow;font-weight: bold;}.important {font-size: 30px;}/style
/headbodyp classhighlight important这是一个既高亮又重要的段落。/p/body/html id 选择器 CSS 中的 ID 选择器用于选取具有特定 id 属性的元素ID 选择器在 CSS 中使用井号#后跟 ID 名称来定义。每个 id 在页面中是唯一的因此 ID 选择器通常只能应用于单个元素。 在 HTML 中每个 id 属性值只能在页面中使用一次但页面中可以有多个不同的 id 值。换句话说每个元素的 id 必须是独一无二的但你可以为页面中的不同元素赋予各自不同的 id。 !DOCTYPE html
htmlheadstyle#header {background-color: lightblue;}#main {font-size: 18px;}#footer {text-align: center;}/style
/headbodydiv idheader这是头部。/divdiv idmain这是主要内容。/divdiv idfooter这是底部。/div/body/html 在这个例子中header、main 和 footer 是不同的 id它们各自对应一个唯一的元素。你可以在页面中定义任意数量的不同 id但每个 id 只能用于一个元素。 通配符选择器 通配符选择器*是 CSS 中的一种选择器能够选取页面中的所有元素。它常用于应用一些全局的样式比如重置页面的默认样式或设置所有元素的通用属性。 !DOCTYPE html
html
headstyle/* 通配符选择器将应用于页面中的所有元素 */* {margin: 0;padding: 0;box-sizing: border-box;}/style
/head
bodyh1标题/h1p这是一个段落。/p/body
/html在这个例子中* 选择器会将所有元素标签中的 margin 和 padding 设置为 0box-sizing 设置为 border-box从而影响页面中的所有元素。这通常用于重置浏览器的默认样式或进行全局样式调整。 虽然通配符选择器很强大但它可能会影响性能尤其是在大型页面上因为它会选取所有元素。使用时应谨慎确保只在确实需要的地方使用。所以通常我们对它进行使用的很少 4.CSS 字体属性 CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。 font-family font-family 用于设置字体系列。可以为文本指定一种或多种字体如果浏览器不支持首选字体会使用后备字体。如果都不支持则使用通用字体 sans-serif。 1.各种字体之间必须使用英文状态下的逗号隔开 2.一般情况下,如果有空格隔开的多个单词组成的字体,加引号“ ”. 3.尽量使用系统默认自带字体保证在任何用户的浏览器中都能正确显示 4.最常见的几个字体
body{
font-family:Microsoft YaHei,tahoma,arial,Hiragino Sans GB;} 注意可以使用把英文转换为中文如微软雅黑但必须对中文加引号“”。 font-size CSS 使用 font-size 属性定义字体大小。 h1 {font-size: 24px;
}
p {font-size: 14px;
}px(像素)大小是我们网页的最常用的单位 谷歌浏览器默认的文字大小为16px 不同浏览器可能默认显示的字号大小不一致我们尽量给一个明确值大小不要默认大小 我们可以给 body指定整个页面文字的大小当然这对标题的字体大小是没影响的它优先级高于body的字体大小优先级必须指定对 h标签 进行修改才会有所改变。同样这在文本字体的粗细中同样适用 font-weight CSS 使用 font-weight属性设置文本字体的粗细, 常用值 normal: 默认字体粗细bold: 粗体数值 (100 - 900)例如 font-weight: 700; 是粗体400 通常是正常字体。 h1 {font-weight: bold;
}
p {font-weight: 300;
}实际开发时我们更喜欢用数字表示粗缩。 font-style font-style 用于设置字体的样式如斜体或正常字体。 常用值 normal: 正常字体italic: 斜体 p {font-style: italic;
}注意:平时我们很少给文字加斜体反而要将斜体标签改为不倾斜字体。 字体复合属性 字体属性可以把以上文字样式综合来写,这样可以更节约代码: body {
font: font-style font-weiqht font-size/line-height font-family;
} 使用 font 属性时必须按上面语法格式中的顺序书写不能更换顺序并且各个属性间以空格隔开 不需要设置的属性可以省略(取默认值)但必须保留font-size和 font-family属性否则font 属性将不起作用 body {font: italic 500 16px/1.5 Arial, sans-serif; /* 使用字体复合属性 */}
5.CSS 文本属性 CSS 文本属性可定义文本的外观比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等 color color用于设置文本的颜色。 其表示有如下三种形式 当然我们不用管用哪种形式在vscode中我们能自己选颜色比较便捷如下图所以无需太在意。 常见的颜色设置代码
h1 {color: red; /* 使用颜色关键字 */
}text-align text-align 属性用于设置元素内文本内容的水平对齐方式。 常用值 left: 左对齐right: 右对齐center: 居中对齐justify: 两端对齐 h3 {text-align: center; /* 设置三级标题文本居中 */
}text-decoration text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、制除线、上划线等 div {
text-decoration: underline:
} 注意删除线和上划线几乎不用而下划线和默认很常用。 此外链接都是自带下划线如果我们想要去掉下划线就要将链接的decoration修饰为none。 a{
text-decoration: none;
} text-indent text-indent属性用来指定文本的第一行的缩进通常是将段落的首行缩进。 div {
text-indent:10px;
} 通过设置该属性所有元素的第一行都可以缩进一个给定的长度甚至该长度可以是负值(负值情况是有但不能用)。 p {
text-indent:2em;
} em 是一个相对单位就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小则会按照默认的1个文字大小 以下就是发生缩进的现象 line-height line-height属性用于设置行间的距离(行高)。可以控制文字 行与行之间的距离。 p{
line-height:26px;
} 当我们设置行间距为26px时字体大小为16px行间距代表如下 那么怎么精准测量好行间距呢 这是一段文字我们只要算好上面一行文字的底部到下面一行文字的底部的距离那就是行间距。 一般情况下我们都是设置行间距为1.5em这样比较舒服。 6.css引入方式 在 CSS 中有三种主要的方式可以将样式引入到 HTML 文档中行内样式表、内部样式表和外部样式表。下面详细介绍每种引入方式 内部样式表 内部样式表使用 style 标签将 CSS 样式嵌入到 HTML 文档的 head 部分。这种方式适合单个页面的样式控制样式集中在一个地方。 !DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title内部样式表示例/titlestylebody {background-color: lightblue;}h1 {color: navy;font-size: 24px;}p {color: darkgreen;font-size: 18px;}/style
/head
bodyh1这是一个标题/h1p这是一个段落。/p
/body
/html优点 所有样式集中在 HTML 文档中容易控制和修改单个页面的样式。可以定义整个页面的样式不需要每个元素都写内联样式。 缺点 样式只对当前页面有效不易复用。当页面内容变多时内联样式表可能使 HTML 文件体积过大。 行内样式表 内联样式直接在 HTML 标签的 style 属性中定义用于为特定的 HTML 元素设置样式。这种方式优先级最高但通常不建议大量使用因为它会导致样式分散维护困难。 p stylecolor: red; font-size: 20px;这是一个红色的大号段落。/p优点 适合快速修改单个元素的样式。直接在元素内定义样式优先级高。 缺点 不利于维护样式和内容耦合。不适合大规模的样式控制。 外部样式表 外部样式表将 CSS 写在一个独立的 .css 文件中通过 link 标签将其引入 HTML 文档。这种方式是最常用的适合多页面网站的样式管理。 link relstylesheet hrefcss文件路径 注意该文件路径应是相对路径。 下面是个例子
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title外部样式表示例/titlelink relstylesheet hrefstyles.css !-- 引入外部样式表 --
/head
bodyh1这是一个标题/h1p这是一个段落。/p
/body
/html外部 CSS 文件styles.css body {background-color: lightblue;
}h1 {color: navy;font-size: 24px;
}p {color: darkgreen;font-size: 18px;
}我们发现外部css文件中不用style标签。 优点 样式与 HTML 内容分离便于维护和复用。适合多页面网站多个页面可以共享同一个样式文件。能减少 HTML 文件的体积页面加载时会缓存 CSS 文件提高性能。 缺点 需要发出额外的 HTTP 请求获取外部 CSS 文件可以通过浏览器缓存减小影响。对于单页应用可能不如内部样式方便。 三种引入方式比较
