找钟点工做的网站,黄冈如何创建免费网站,注册中文域名费用一般多少钱,新能源汽车价格表CSS的发展历史 CSS#xff08;层叠样式表#xff09;最初由万维网联盟#xff08;W3C#xff09;于1996年发布。CSS1是最早的版本#xff0c;它为网页设计提供了基本的样式功能#xff0c;如字体、颜色和间距。随着互联网的发展#xff0c;CSS也不断演进#xff1a;
C…CSS的发展历史 CSS层叠样式表最初由万维网联盟W3C于1996年发布。CSS1是最早的版本它为网页设计提供了基本的样式功能如字体、颜色和间距。随着互联网的发展CSS也不断演进
CSS11996年引入基本的样式功能。CSS21998年增加了定位、媒体类型和更复杂的选择器。CSS32001年引入模块化设计包括媒体查询、动画、过渡等。
CSS的发展使得网页设计更加灵活能够适应不同设备和屏幕尺寸。
CSS与HTML的关系 CSS与HTML的关系密不可分。HTML用于构建网页的结构和内容而CSS则负责控制这些内容的外观和布局。通过将样式与内容分离开发者可以更轻松地管理和维护网页提高代码的可读性。
为什么要学CSS
学习CSS的原因有很多包括
提升用户体验良好的样式能够提高网页的可读性和可用性。增强网页可访问性合理的布局和样式使得内容更易于访问。职业发展掌握CSS是成为前端开发者的基本要求可以增强求职竞争力。
CSS在HTML中的三种引用方式
1. 内联式行内式 内联式是在HTML元素的style属性中直接添加CSS样式。适合简单快速的样式修改但不推荐大规模使用。
优点快速方便不需要额外的文件。缺点样式不易维护无法重用。
2. 嵌入式 嵌入式CSS是将样式放在HTML文档的head部分使用style标签。适用于单个页面的样式管理。
优点可以集中管理页面样式。缺点无法在多个页面间共享样式。
3. 外部式 外部CSS是通过link标签引入一个独立的CSS文件适合大型项目样式可以在多个页面间共享。
优点易于维护和更新样式可重用。缺点需要额外的HTTP请求。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title初识CSS/titlestyle/*css样式选择器声明声明由属性值构成*/span{color: orange;font-size:30px;}/stylelink relstylesheet hrefcss/studemo1.css/head
bodyh4有志者事竟成/h4pspan三天/span,span一个月/span/pp stylecolor: red;大帅比/p!-- 三种引入方式针对同一标签修饰的优先级问题本质是代码从上至下执行的顺序覆盖问题其实并无优先级。层叠样式表顾名思义--/body
/html
外部引入的.css文件
/*引入css的三种方式
内联式行内式
嵌入式
外部式*/
h4{color: blue;}
优先级和权重
CSS的优先级决定了哪些样式会被应用通常规则如下
内联样式具有最高优先级。嵌入式样式次之。外部样式的优先级最低。 !-- 三种引入方式针对同一标签修饰的优先级问题本质是代码从上至下执行的顺序覆盖问题其实并无优先级。层叠样式表顾名思义--
顺便一提html中注释为!-- -- 而在CSS中注释为/* */
选择器
什么是选择器
选择器用于选择要应用样式的HTML元素。选择器可以根据元素的标签、ID、类等进行匹配。
基本选择器 元素选择器选择特定标签的元素。 ID选择器选择具有特定ID的元素使用#符号。 类选择器选择具有特定类的元素使用.符号。
高级选择器 后代选择器选择某个元素内部的所有指定元素。 子代选择器选择某个元素的直接子元素。 交集选择器选择同时匹配多个选择器的元素。 组合选择器选择满足多个条件的元素。 伪类选择器选择处于特定状态的元素。
下面示例两个一组一个html文件一个是css文件从外部引入
示例1
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title人民日报金句 /titlelink relstylesheet href./css/studemo2.css/head
bodyp idtop/pdiv idcontains!-- 一个标签可以归属多个类 --h1 classactive title最走心最励志的人民日报金句文案 /h1p1、人生这条路很长未来如星辰大海般璀璨不必踟躇于过去的半亩方塘。那些所谓的遗憾可能是一种成长那些曾受过的伤终会化作照亮前路的光。——《人民日报》/pp2、人这辈子千万不要马虎两件事一是找对爱人二是找对事业因为太阳升起时要投身事业太阳落山时要与爱人相拥的。我们终其一生都在寻找两样东西一是价值感二是归属感…价值感来源于肯定归属感来源于被爱。——《人民日报》/pp3、现在的你是十年前你的决定十年后的你是现在你的决定。种一棵树最好是十年前其次是现在。想要改变从此刻开始一切还不晚。span idst星光不问赶路人时光不负有心人,/span愿十年后的今天不为虚度年华儿悔恨所得皆所愿。我们各自努力顶峰相见。——《人民日报》/pimg src./images/01.jpeg altp classactive title4、历经沉浮休戚与共。然兴衰往复皆不足为惧于沉寂中孤守于浮华中炼心。——《人民日报》/pp5、鸟叫虫鸣是自然韵味车水马驼也是另一种美。教室里朗朗书声传递出学子们的蓬勃朝气街头巷尾喧哗的人声烘托出人间烟火的可贵;列车飞驰的轰鸣奔跑出社会向前的节拍。但只有当生产生活的声音与自然的声音交汇在一起时才有最美的和谐乐章。——《人民日报》/pp6、你所有的压力都是因为你太想要。你所有的痛苦都是因为你太较真了。有些事不能尽你心意就是提醒你该转弯了。如果事事都如意那就不叫生活了所以睡前原谅一切醒来不问过往珍惜所有的不期而遇看淡所有的不辞而别。——《人民日报》/pimg src./images/02.jpeg alt title我最帅哈哈哈p7、真正有光的人压的时间越久深度越深绽放的光芒才可以灿烂。——《人民日报》/pp8、我们希望瞬间的积淀不要流淌岁月的馈赠别被消磨而是在时间的河床上凝聚起沉潜的力量让我们与时代和社会一起向阳生长。——《人民日报》/pp9、错过无眠的夜晚。错过寂落的叮咛。错过感怀或刺伤错过滂沱与分享。错过一双蜻蜓的翅膀。错过一缕蚂蚁的浅唱。错过命中那些永不再来的叶落花开春回冬往。错过终于勇敢的沉默错过早已错过的迷惘。一次错过是过失一再错过是过错。——《人民日报》/pimg src./images/03.jpeg alt titlep10、抉择是新生是涅槃后更为强壮的灵魂是摧枯拉朽、洗髓换骨后的轻盈如燕是从悲观中升华出的达观是最终化成的不老青山。——《人民日报》/pp11、不跟生活认输不向岁月低头如果风景不够好就让我们多走几步如果道路不好走就让我们放慢脚步只要还在路上总能看到想要的风景总能找到属于自己的方向。——《人民日报》/pp12、平和地接纳不屈地奋斗坚定地前行如一泓清泉静水流深看似力量并不汹涌澎湃却能磋磨岩石锋利的尖角涤荡水中的混沌的杂质把困难揉碎长成属于自己的力量。——《人民日报》/pimg src./images/04.jpeg altbra href#top点击回到顶部/a/div/body
/html
/*
css常用选择器一、基本选择器-标签元素选择器-类class选择器-id选择器二、高级选择器-后代选择器-子代选择器-组合选择器-交集选择器-伪类选择器
*/#st{color: blue; font-size: 20px;}.active {color: grey;}
.title{font-size: 30px}p{color: orange; font-size: 18px; font-weight: bold;} 示例2
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title后代/子代选择器/titlelink relstylesheet href./css/studemo3.css
/head
!-- css高级选择器后代、子代、组合、交集、伪类--
bodydiv classwraph3悲观/h3p悲观者永远正确a hrefhello!/a/pa hrefJJX/a/divdivp你好选择器。/pa href小圆圈/a/div/body
/html
/*后代选择器针对div的后代a标签*/div a{color: orange;font-size: 20px}/*子代选择器*/
.wrapa{color: pink;}/*组合选择器*/
h3,p{color: red;font-size: 16px;} 示例3
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title交集/伪类选择器/titlelink relstylesheet href./css/studemo4.css
/head
bodyh3WWW。。。/h3divpJJX你好/p/divpHELLO/pa href#小布丁/adivp idmi小米商城/p/div/body
/html
/*交集选择器*/
div p{color: green;}
h3{color: blue;}
div ph3{font-size: 16px;font-weight: lighter;}/*伪类选择器*//*link,visted,active只针对于a标签hover所有标签都适用*/a:link{color: grey;} /*未访问过的状态*/
a:visted{color: black;} /*访问过后的状态*/
a:hover{color: red;} /*悬浮时的状态*/
a:active{color: green;} /*鼠标摁住的状态*/#mi:hover{color: blue;}div:hover{background-color: orangered;}
效果展示 为点击小米商城时为绿色当鼠标悬浮时字体变为蓝色同时背景变为橙色
选择器权重 /继承 !-- 选择器权重 内联式id选择器类选择器元素选择器 --
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title继承/titlelink relstylesheet href./css/studemo5.css/head
bodydivullip你好/p/li/ul/div!-- 选择器权重 内联式id选择器类选择器元素选择器 --/body
/html 此外标签的属性可以继承学过面向对象的编程语言都知道继承是什么我就不多解释毕竟小白不可能来看我的文章 但有的属性可以继承有的不能。
/*继承*/
body{color: green;font-size: 18px;border: 2px solid yellowgreen;/*此属性不会被继承*/
}
效果展示 !important属性
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title字体属性/titlelink relstylesheet href./css/studemo6.css/head
bodydivp stylecolor:green;hello world!你好世界/p/div/body
/html
/* !impoortant可超出选择器权重之外进行修改 */
p{color: purple !important;
} !important是能够打破权重规则对其进行强制的修改只要经!important修饰的属性网页所表现出来的一定是!important所修饰的值不建议用平时也用的少了解即可此处内联式为绿色外部引入!important紫色所以最终结果一定是紫色。
效果展示 字体属性
字体属性决定了文本的外观。常见的字体属性包括
font-family设置字体。font-size设置字体大小。font-weight设置字体粗细。color设置字体颜色。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title字体属性/titlelink relstylesheet href./css/studemo6.css/head
bodydivp stylecolor:green;hello world!你好世界/p/div/body
/html
/* !impoortant可超出选择器权重之外进行修改 */
p{color: purple !important;}
body{color: #FFFFFF; /*16进制表示颜色*/font-family:Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei;font-size: 20px;font-style: italic; /*转为斜体*/font-weight: 600; /*font-weight: bold;*/text-decoration: underline;
}font-family设置的字体按顺序优先执行如果没有第一种字体则会显示第二种字体以此类推如果都没有则会显示浏览器默认字体
font-size如果不设置默认为16px 三种颜色表示方式 color: red; 单词表示不常用 color: rgb(255, 0, 255); 颜色范围[0,255] ,透明度[0,1] color: rgba(0, 0, 0, 1.0); color: ##AAAE38; 16进制表示常用 像素单位 px是绝对单位 emrem是相对单位 字体粗细表示有两种方式 font-weight: bold;不常用 font-weight: 500;常用范围[100,900],normal为默认值400 font的另一种表示
如此多的font表示起来不方便还有另一种表示方法
body {font: 14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;color: #333;background-color: #fff;min-width: 1226px; - font: 14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; - 这一行定义了字体的大小、行高和字体系列。 - 14px 是字体的大小。 - 1.5 是行高相对于字体大小的比例即行高为字体大小的 1.5 倍。 - 接下来的字体系列是一个回退字体列表如果第一种字体不可用浏览器会依次尝试使用后面的字体直到找到可用的字体。最终的 sans-serif 是一个通用字体类别表示无衬线字体。 - color: #333; - 这行设置文本颜色为深灰色十六进制颜色代码 #333。 - background-color: #fff; - 这行设置背景颜色为白色十六进制颜色代码 #fff。 - min-width: 1226px; - 这行设置 body 元素的最小宽度为 1226 像素。无论屏幕大小如何body 的宽度不会小于这个值。 文本属性
文本的属性包括
text-align设置文本对齐方式。line-height设置行高。letter-spacing设置字间距。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文本属性/titlestyle.box p{background-color: lightpink;font-size: 20px;color:#F6730A;text-indent: 2em;/*text-indent: 40px;*//*行高*/line-height: 2em;/*line-height: 40px;*//*文字间距*/letter-spacing: 5px;/*文本对齐方式:center,left,right*/text-align:left; }#lam{text-align: center;/*单词间距*/word-spacing:20px;}/style/headbodydiv classboxp当今社会是科学技术和信息时代迅猛发展的时代随着计算机的普及和广泛使用掌握和应用计算机已经是科学发展和走向未来信息化时代的需要且已成为当今合格人材的必备素质之一。作为当今社会的主人掌握电脑操作这一信息处理的工具是尤为重要的。现代教育技术迅速发展需要学习的知识越来越多知识更新的周期越来越短。为了培养优秀的跨世纪人材必须提高教学效益改革教学方法与教学手段。才能适应现代教育技术的发展。/p/divp idlamhello world!/p/body
/html
效果展示 标签元素分类
HTML标签可以分为以下几类
块状元素如div、p可以设置宽高独占一行。行内元素如span、a不能设置宽高紧随其后排列。行内块元素如img、button可以设置宽高独占一行。
各元素的特点
块状元素可以设置宽高独占一行。行内元素不能设置宽高元素在一行内流动。行内块元素既可以设置宽高也不独占一行。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title元素分类/titlestylediv{background-color: green;width: 200px;height: 20px;}input{width: 200px;height: 200px;}img{width: 500px;height: 500px;}/style
/head
body!-- 1.块状元素(1)独自占一行(2)可以设置宽高如果不设置默认为父标签的100%宽度高度2.行内元素(1)都显示在一行(2)不能设置宽高3.行内快元素(1)在一行内显示(2)可以设置宽高--块状元素divJJX/divpJJX/ph3h系列标签都属块状元素标签/h3ulliJJX/li/ulolliJJX/li/oltableth/thtr/tr/tabledldd/dd/dlhr行内元素bra href/aspan/spanhr行内块元素brinput typetextimg src alt/body
/html
display属性
display属性用于控制元素的显示方式
block块状元素独占一行。inline行内元素不独占一行。inline-block行内块元素既可以设置宽高又不独占一行。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titledisplay属性/titlestylediv{background-color: orange;width: 200px;height: 200px;
/* display: none;*/}span{width: 200px;
/* height: 200px;*/text-align: center;line-height: 40px;background-color: hotpink;display: inline-block;/*转成行内块属性}/style
/head
bodydivpJJX/p/divspan小圆圈/span/body
/html
效果展示 小米商城顶部栏复刻
最后做个示例用小米商城导航栏做个演示先看原图 我们要复刻导航栏部分这里是代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title小米商城顶部栏复刻/titlestyle.top_bar{background-color: #333;width: 100%;height: 40px;}.top_bar a{display: inline-block;line-height: 40px;color: #b0b0b0;text-decoration: none;}.top_bar span{color: #424242;}.top_bar a:hover{color: #fff;}/style
/head
bodydiv classtop_bara hrefhttps://www.mi.com/小米官网/aspan|/spana hrefhttps://www.mi.com/shop小米商城/aspan|/spana hrefhttps://hyperos.mi.com/ target_blank小米澎湃OS/aspan|/spana hrefhttps://www.xiaomiev.com/ target_blank小米汽车/aspan|/spana hrefhttps://i.mi.com/ target_blank云服务 /aspan|/span a hrefhttps://iot.mi.com/ target_blankIoT/a/div/body
/html
来看效果 这里用display属性转换a标签为行内块才得以设置行高如果不转换a标签作为行内元素是不能设置行高的正因如此才能使a标签的范围变大还使用text-decoration: none;去掉了a标签自带的下划线利用伪类选择器hover悬浮时字体呈现高亮。 总结 我们回顾了CSS的发展历史了解了它与HTML的紧密联系以及学习CSS的必要性。我们还详细介绍了CSS在HTML中的三种引用方式及其优缺点以及如何通过选择器来精准地控制网页元素的样式。 剩下内容会作为CSS下篇更新最后写作不易点个赞支持一下吧……
