wordpress最底部,网站优化怎么弄,怎么增加网站浏览量,支付的网站建设费整么做账文章目录 CSS全解析一、CSS是什么二、基本语法规范三、引入方式#xff08;一#xff09;内部样式表#xff08;二#xff09;行内样式表#xff08;三#xff09;外部样式 四、代码风格#xff08;一#xff09;样式格式#xff08;二#xff09;样式大小写#xf… 文章目录 CSS全解析一、CSS是什么二、基本语法规范三、引入方式一内部样式表二行内样式表三外部样式 四、代码风格一样式格式二样式大小写三空格规范 五、选择器一选择器的功能二选择器的种类1. 基础选择器2. 复合选择器 六、常用元素属性一字体属性二文本属性三背景属性四圆角矩形 七、Chrome调试工具一标签页含义 八、元素的显示模式一块级元素二行内元素/内联元素 九、盒模型一边框二内边距三外边距四去除浏览器默认样式 十、弹性布局一初体验二flex布局基本概念三常用属性 CSS全解析
在现代网页开发中CSS层叠样式表Cascading Style Sheets就像是一位幕后的魔法师将平淡无奇的HTML结构变幻成视觉上令人惊艳的网页。今天我们就来深入探索CSS的奇妙世界。
一、CSS是什么
CSS是层叠样式表它在网页开发中扮演着不可或缺的角色。它能够对网页中元素位置的排版进行像素级精确控制就像一位技艺精湛的工匠精心雕琢每个元素的布局。通过CSS我们可以轻松实现美化页面的效果将内容与样式分离使HTML文件专注于结构而CSS文件专注于样式呈现。这就好比化妆术被誉为“东方四大邪术”之一可以为网页这个“脸庞”增添魅力。
二、基本语法规范
CSS的基本语法遵循“选择器 {一条/N条声明}”的模式。其中选择器如同指挥官决定针对哪些元素进行修改也就是“找谁”而声明则像指令决定对这些元素修改什么也就是“干啥”。声明中的属性是键值对的形式使用“;”来区分不同的键值对使用“:”区分键和值。
CSS的注释使用“/* */”这在代码中添加解释和说明时非常有用我们还可以使用“ctrl /”在代码编辑器中快速切换注释状态。在HTML中CSS可以写在“style”标签内这个“style”标签理论上可以放到页面的任意位置但一般放到“head”标签内这样有助于提高代码的可读性和维护性。
三、引入方式
一内部样式表
内部样式表是将CSS代码写在“style”标签中然后嵌入到HTML内部。虽然理论上“style”标签可以放在HTML的任何地方但将其放在“head”标签中是一种良好的实践这样可以使样式和页面结构分离。然而这种方式也有缺点当CSS内容较多时分离得还不够彻底。在实际开发中这种方式并不常用不过在一些简单的页面或者小型项目中还是可以看到它的身影比如搜狗搜索中仍然保留着这种写法。
二行内样式表
行内样式表是通过元素的“style”属性来指定某个标签的样式。这种方式适合编写简单的样式并且只针对某个特定的标签生效。它的缺点是不能编写太复杂的样式不过它的优先级较高会覆盖其他方式定义的样式。例如
stylep {/* 设置字体颜色 */color: red;/* 设置字体大小 */font - size: 30px;}
/style
p stylecolor: green;hello/p在这个例子中行内样式的“color: green”会覆盖在“style”标签中定义的“color: red”。
三外部样式
外部样式是实际开发中最常用的方式。其步骤包括创建一个.css文件然后使用“link”标签将这个CSS文件引入到HTML文件中。这种方式的优点是样式和结构彻底分离使得代码的可维护性大大提高。但它也有一个小缺点那就是受到浏览器缓存的影响修改之后不一定立刻生效。这是因为浏览器为了提高访问效率会对网页依赖的资源如图片、CSS、JS等进行缓存。当我们修改了外部的CSS文件后可能需要通过“ctrl F5”强制刷新页面才能让浏览器重新获取最新的CSS文件。
四、代码风格
一样式格式
紧凑风格这种风格的代码较为紧凑节省空间但可能在可读性上稍逊一筹。展开风格推荐代码展开结构清晰易于阅读和维护是一种比较好的代码编写风格。
二样式大小写
虽然CSS不区分大小写但为了保持代码的规范性和一致性在开发时统一使用小写字母是一种良好的编程习惯。
三空格规范
在CSS中冒号后面带空格选择器和“{”之间也有一个空格这样可以使代码更加清晰易读。
五、选择器
一选择器的功能
选择器的主要功能是选中页面中指定的标签元素只有先选中元素才能设置元素的属性。这就好比在游戏如SC2、War3中需要先选中单位才能指挥该单位行动。
二选择器的种类
1. 基础选择器
标签选择器能够快速为同一类型的标签都选择出来但不能进行差异化选择。例如我们可以使用“p”标签选择器来设置所有“p”标签的样式
p {color: red;
}类选择器它可以实现差异化表示不同的标签多个标签可以使用同一个类名一个标签也能使用多个类名多个类名之间用空格分割。类名以“.”开头下方的标签使用“class”属性来调用。类选择器是最灵活、最常用的选择器之一。例如
.blue {color: blue;
}
div classblue咬人猫/div
div咬人猫/divid选择器和类选择器类似但在HTML中id是唯一的不能被多个标签使用同一个id在一个HTML中只能出现一次。CSS中使用“#”开头表示id选择器并且id选择器的值和html中某个元素的id值相同html的元素id不必带“#”。例如
#myElement {background - color: yellow;
}
div idmyElement这是一个独特的元素/div通配符选择器使用“*”定义选取所有的标签。不过这种选择器通常在特殊情况下使用因为它会选中页面的所有内容。例如
* {color: red;
}2. 复合选择器
后代选择器又叫包含选择器用于选择某个父元素中的某个子元素。元素1和元素2之间使用空格分割元素1是父级元素2是子级只会选择元素2而不影响元素1。这种选择器非常灵活可以是任意基础选择器的组合。例如
ol li {color: red;
}子选择器和后代选择器类似但只能选择子标签使用大于号“”分割。它只会选择亲儿子元素不选孙子元素。例如
.two a {color: red;
}并集选择器用于选择多组标签集体声明通过逗号“,”分割多个元素表示同时选中这些元素。任何基础选择器都可以使用并集选择器建议竖着写每个选择器占一行最后一个选择器不能加逗号。例如
div, h3 {color: red;
}伪类选择器 链接伪类选择器用于选择不同状态的链接如“a:link”选择未被访问过的链接“a:visited”选择已经被访问过的链接“a:hover”选择鼠标指针悬停上的链接“a:active”选择活动链接鼠标按下了但是未弹起。在书写时要按照“LVHA”的顺序否则可能会导致某些样式失效。在实际开发中主要给链接做一个样式然后给“a:hover”做一个样式即可“link”、“visited”、“active”用的相对较少。例如
a:link {color: black;/* 去掉a标签的下划线 */text - decoration: none;
}a:visited {color: green;
}a:hover {color: red;
}a:active {color: blue;
}- **:focus伪类选择器**选取获取焦点的input表单元素。例如.three input:focus {color: red;
}六、常用元素属性
一字体属性
字体设置字体名称可以使用中文但不建议因为可能会存在兼容性问题。多个字体之间使用逗号分隔从左到右查找字体如果都找不到会使用默认字体。如果字体名有空格需要使用引号包裹。例如
body {font - family: 微软雅黑, Microsoft YaHei;
}字体大小不同浏览器的默认字号不一样所以最好给一个明确的值单位通常为“px”。可以给“body”标签设置一个全局的字体大小同时标题标签可能需要单独指定大小。例如
p {font - size: 20px;
}字体粗细可以使用数字表示粗细“700 bold”“400 normal”取值范围是100 - 900。例如
p {font - weight: bold;font - weight: 700;
}文字样式虽然很少把某个文字变倾斜但经常需要把“em”、“i”标签改成不倾斜。例如
.font - style em {font - style: normal;
}二文本属性
文本颜色可以使用预定义的颜色值直接是单词、十六进制形式或者RGB方式来设置文本颜色。例如
color: red;
color: #ff0000;
color: rgb(255, 0, 0);文本对齐用于控制文字水平方向的对齐也能控制图片等元素的水平对齐方式取值有“center”居中对齐、“left”左对齐、“right”右对齐。例如
.text - align.three {text - align: center;
}文本装饰常用取值有“underline”下划线常用于链接、“none”啥都没有可用于去掉a标签的下划线、“overline”上划线不常用、“line - through”删除线不常用。例如
.text - decorate.one {text - decoration: none;
}文本缩进控制段落的首行缩进其他行不影响单位可以使用“px”或者“em”使用“em”作为单位更好1个“em”就是当前元素的文字大小。缩进可以是负的表示往左缩进但可能会导致文字冒出去。例如
.text - indent.one {text - indent: 2em;
}行高行高指的是上下文本行之间的基线距离它等于上边距 下边距 字体大小。行高也可以取“normal”等值这个值取决于浏览器的实现。当行高等于元素高度时可以实现文字的垂直居中对齐。例如
.line - height.two {height: 100px;line - height: 100px;
}三背景属性
背景颜色默认是“transparent”透明的可以通过设置颜色的方式修改。例如
body {background - color: #f3f3f3;
}背景图片比“img”标签更方便控制位置图片在盒子中的位置。在设置背景图片时要注意“url”不要遗漏“url”可以是绝对路径也可以是相对路径并且可以加引号也可以不加。例如
.bgi.one {background - image: url(rose.jpg);height: 300px;
}背景平铺重要取值有“repeat”平铺、“no - repeat”不平铺、“repeat - x”水平平铺、“repeat - y”垂直平铺默认是“repeat”。背景颜色和背景图片可以同时存在背景图片在背景颜色的上方。例如
.bgr.one {background - image: url(rose.jpg);height: 300px;background - repeat: no - repeat;
}背景位置可以通过方位名词如“top”、“left”、“right”、“bottom”、精确单位坐标或者百分比以左上角为原点或者混合单位同时包含方位名词和精确单位来修改图片的位置。例如
.bg p.one {background - image: url(rose.jpg);height: 500px;background - repeat: no - repeat;background - color: purple;background - position: center;
}背景尺寸可以填具体的数值如“40px 60px”表示宽度为40px高度为60px也可以填百分比按照父元素的尺寸设置还可以使用“cover”把背景图像扩展至足够大以使背景图像完全覆盖背景区域但背景图像的某些部分也许无法显示在背景定位区域中或者“contain”把图像扩展至最大尺寸以使其宽度和高度完全适应内容区域。例如
.bgs.one {width: 500px;height: 300px;background - image: url(rose.jpg);background - repeat: no - repeat;background - position: center;background - size: contain;
}四圆角矩形
通过“border - radius”属性可以使边框带圆角效果。如果“border - radius”的值为正方形宽度的一半则可以生成圆形如果为矩形高度的一半则可以生成圆角矩形。例如
div {width: 200px;height: 200px;border: 2px solid green;border - radius: 100px;/* 或者用50%表示宽度的一半 */border - radius: 50%;
}“border - radius”是一个复合写法实际上可以针对四个角分别设置例如
border - top - left - radius: 10px;
border - top - right - radius: 20px;
border - bottom - right - radius: 30px;
border - bottom - left - radius: 40px;七、Chrome调试工具
在开发过程中Chrome调试工具是一个非常强大的助手。我们可以通过两种方式打开它直接按“F12”键或者鼠标右键页面然后选择“检查元素”。
一标签页含义
elements可以查看标签结构还能通过“ctrl 滚轮”进行缩放“ctrl 0”恢复原始大小。使用左上角箭头选中元素后在右侧可以查看当前元素的属性包括引入的类也可以修改选中元素的CSS属性并且如果CSS样式写错了会在这里有提示黄色感叹号。console用于查看控制台信息。source查看源码并进行断点调试。network查看前后端交互过程。application查看浏览器提供的一些扩展功能如本地存储等。Performance、Memory、Security、Lighthouse这些暂时不使用先不深究。
八、元素的显示模式
在CSS中HTML标签的显示模式主要有块级元素和行内元素两种。
一块级元素
常见的块级元素有“h1 - h6”、“p”、“div”、“ul”、“ol”、“li”等。块级元素的特点是独占一行高度、宽度、内外边距、行高都可以控制宽度默认是父级元素宽度的100%并且是一个容器盒子里面可以放行内和块级元素。不过要注意文字类的元素内不能使用块级元素例如“p”标签主要用于存放文字内部不能放“div”等块级元素。
二行内元素/内联元素
常见的行内元素有“a”、“strong”、“b”、“em”、“i”、“del”、“s”、“ins”、“u”、“span”等。行内元素的特点是不独占一行一行可以显示多个设置高度、宽度、行高无效左右外边距有效上下无效内边距有效默认宽度就是本身的内容并且行内元素只能容纳文本和其他行内元素不能放块级元素。同时要注意“a”标签中不能再放“a”标签虽然chrome不报错但不建议这么做“a”标签里可以放块级元素但更建议先把“a”转换成块级元素。
我们可以使用“display”属性来改变元素的显示模式例如“display: block”可以将元素改成块级元素常用“display: inline”改成行内元素很少用“display: inline - block”改成行内块元素。
九、盒模型
在CSS中每一个HTML元素都可以看作是一个矩形的“盒子”这个盒子由边框border、内容content、内边距padding、外边距margin这几个部分构成。
一边框
边框有基础属性包括粗细border - width、样式border - style默认没边框如solid为实线边框、dashed为虚线边框、dotted为点线边框、颜色border - color这些属性支持简写且没有顺序要求。我们可以单独修改四个方向的任意边框例如只给上边框设为红色其余为蓝色
div {width: 500px;height: 250px;border - width: 10px;border - style: solid;border - color: green;border - top: red;
}需要注意的是边框会撑大盒子例如设置了10px的边框后width和height原本是500 * 250但最终整个盒子大小变成了520 * 270。我们可以通过box - sizing属性修改浏览器的行为使边框不再撑大盒子如使用通配符选择器“* {box - sizing: border - box;}”。
二内边距
padding用于设置内容和边框之间的距离。它有基础写法可以给四个方向分别添加边距padding - top、padding - bottom、padding - left、padding - right。当添加padding后盒子的大小会被撑大例如
div {height: 200px;width: 300px;padding - top: 5px;padding - left: 10px;
}原本盒子大小为300 * 200添加内边距后变成了310 * 205。同样使用box - sizing: border - box属性可以使内边距不再撑大盒子。此外padding还有复合写法可以将多个方向的padding合并到一起常见的有四种情况
padding: 5px;表示四个方向都是5px。padding: 5px 10px;表示上下内边距5px左右内边距为10px。padding: 5px 10px 20px;表示上边距5px左右内边距为10px下内边距为20px。padding: 5px 10px 20px 30px;表示上5px右10px下20px左30px顺时针。
三外边距
外边距margin的基础写法可以控制盒子和盒子之间的距离能给四个方向都加上边距margin - top、margin - bottom、margin - left、margin - right。其复合写法规则同padding。例如
.div1 {margin - bottom: 20px;
}.div2 {margin: 10px; /* 四个方向都设置 */margin: 10px 20px; /* 上下为10左右20 */margin: 10px 20px 30px; /* 上10左右20下30 */margin: 10px 20px 30px 40px; /* 上10右20下30左40 */
}对于块级元素水平居中可以在指定宽度如果不指定宽度默认和父元素一致的前提下将水平margin设为auto有三种写法margin - left: auto; margin - right: auto;、margin: auto;、margin: 0 auto;。需要注意的是这个水平居中的方式和text - align不一样margin: auto是给块级元素用的text - align: center是让行内元素或者行内块元素居中的并且对于垂直居中不能使用“上下margin为auto”的方式。
四去除浏览器默认样式
浏览器会给元素加上一些默认的样式尤其是内外边距并且不同浏览器的默认样式存在差别。为了保证代码在不同的浏览器上都能按照统一的样式显示我们往往会去除浏览器默认样式使用通配符选择器“* {margin: 0; padding: 0;}”即可完成这件事情。
十、弹性布局
一初体验
创建一个div内部包含三个span元素初始状态下它们按照行内元素的特性排列。当给div加上display: flex之后span元素有了一些变化看起来更像是块级元素有了高度等属性。再给div加上justify - content: space - around;后这些span元素能够水平隔开若把justify - content: space - around;改为justify - content: flex - end;则三个元素会在右侧显示。
二flex布局基本概念
flex是flexible box的缩写意为“弹性盒子”。任何一个html元素都可以指定为display: flex来完成弹性布局。其本质是给父盒子添加display: flex属性从而控制子盒子的位置和排列方式。被设置为display: flex属性的元素称为flex container弹性容器它的所有子元素立刻成为该容器的成员称为flex item弹性项目。flex item可以纵向排列也可以横向排列这个方向称为flex direction主轴。需要注意的是当父元素设置为display: flex之后子元素的float、clear、vertical - align都会失效。
三常用属性
justify - content 此属性用于设置主轴上的子元素排列方式但使用之前一定要确定好主轴是哪个方向。它有多个属性取值 未指定时默认按照从左到右的方向布局。当设置为justify - content: flex - end时元素都排列到右侧。当设置为jutify - content: center时元素居中排列。当设置为justify - content: space - around时会平分剩余空间。当设置为justify - content: space - between时先让两边元素贴近边缘再平分剩余空间。 align - items 该属性用于设置侧轴上的元素排列方式。它的取值和justify - content差不多。其中stretch拉伸是align - content的默认值表示如果子元素没有被显式指定高度那么就会填充满父元素的高度。我们可以使用align - items实现垂直居中但需要注意的是align - items只能针对单行元素来实现如果有多行元素就需要使用item - contents。
CSS是一个功能强大且内容丰富的样式语言掌握它需要不断地学习和实践。无论是构建简单的个人博客还是复杂的商业网站CSS都是我们实现精美页面布局和视觉效果不可或缺的工具。希望通过这篇博客能让大家对CSS有更深入、更全面的理解从而在网页开发的道路上更加得心应手。
