优秀画册设计网站,浙江省城乡和住房建设厅网站,产品怎样推广有效,怎样在安装wordpress目录
0、CSS介绍
1、CSS语句组成
2、CSS选择器的选择方式
1#xff09;CSS选择器的方式和选择器大全#xff1a;
2#xff09;常见的三种方式#xff1a;
3、添加CSS方式 1#xff09;外部样式表 html调用css代码
css文件
html文件
展示
2#xff09;内部样式表…
目录
0、CSS介绍
1、CSS语句组成
2、CSS选择器的选择方式
1CSS选择器的方式和选择器大全
2常见的三种方式
3、添加CSS方式 1外部样式表 html调用css代码
css文件
html文件
展示
2内部样式表 3内联样式表——不推荐使用
4、CSS选择颜色的方法(六种)
0)CSS颜色查询网址 1HSL和RGB值转换网址
2)六种方法
3HSL模型介绍
4)常见颜色展示
修改样式前
修改样式后
5、CSS字体
1)CSS常用字体格式 2字体参考网站
3常见字体属性设置
6、CSS盒子模型box
1)单个盒子的模型 2多个盒子的布局情况
①错误布局
②正确情况 3margin指定padding指定一样 7、CSS无序列表 8、CSS给按钮添加属性点击时按下时访问过时
9、CSS布局类型
1三联文字进行布局
2两联进行布局
3删除多联布局格式
10、CSS定位 为初学者准备的CSS 速成_哔哩哔哩_bilibili这是一个为初学者准备的 CSS 速成教程视频中会介绍使用 CSS 为 HTML 添加样式使用 CSS 布局网页。在学习 CSS 之前必须学过 HTML。如果你已经在使用 CSS 制作网页那这个视频并不会给你带来更多新的知识当然你也可以把它当做回顾使用。JavaScript 的内容在下一期。MDN HTML文档https://developer.mozilla.org/en-US/docshttps://www.bilibili.com/video/BV1bW411R7hg/?spm_id_from333.788.recommend_more_video.-1
0、CSS介绍 注意 HTML只负责编写代码将控件等显示不负责显示格式和网页业务逻辑处理 CSS负责网页格式处理使得网页显示更加地美化如布局、格式等 业务逻辑一般是用Java/Python/js等语言编写然后在后台进行显示 1、CSS语句组成 注 1上面图像的意思将tag为p的文本的颜色属性设置为red值即红色 2、CSS选择器的选择方式
1CSS选择器的方式和选择器大全
CSS selectors - Learn web development | MDNhttps://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors 2常见的三种方式 三者区别 p:标签多个 class:类名类似于一个盒子多个 id:一般每一个id值都是唯一的 3、添加CSS方式 1外部样式表 新建css文件定义style在HTML文件对应位置调用css文件即可调用html文件主要是利用标签link在标签head中进行调用指明css文件的位置html调用css代码 css文件
/*定义类名为contener的格式,显示宽度为80%*/
.conteners {margin: auto;width: 80%;
}/*定义类名为box1的格式*/
.box1 {/*背景色*/background-color: antiquewhite;/*文字颜色*/color: blueviolet;
}
html文件
!DOCTYPE html
html langenheadmeta charsetUTF-8
!--调用css文件--link relstylesheet typetext/css hrefexternel_css.csstitleCSS 外联样式表学习/title
/headbody
div classcontenersdiv classbox1h1Hello World/h1p今天是2021年12月26日/p/div
/div/body/html
展示 2内部样式表
在Html文件的head标签中添加style标签设置不同选择器的属性
!DOCTYPE html
html langenheadmeta charsetUTF-8titleCSS 样式表学习/title!--在head中设置样式添加CSS方式内部样式表--styleh1{color: blueviolet;}/style
/headbody
h1Hello World/h1
p今天是2021年12月26日/p
/body/html 3内联样式表——不推荐使用
核心代码 !DOCTYPE html
html langenheadmeta charsetUTF-8titleCSS 样式表学习/title!--在head中设置样式添加CSS方式内部样式表--
/headbody
h1 stylecolor: bluevioletHello World/h1
p今天是2021年12月26日/p
/body/html 4、CSS选择颜色的方法(六种)
0)CSS颜色查询网址 - CSS层叠样式表 | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value 1HSL和RGB值转换网址
HSL to RGB | RGB to HSL | Colour Calculator | Hex Color Converterhttps://serennu.com/colour/hsltorgb.php 2)六种方法 3HSL模型介绍 4)常见颜色展示
body背景色#f4f4f4
body文字#555555
修改样式前
/*定义类名为contener的格式,显示宽度为80%*/
.conteners {margin: auto;width: 80%;
}/*定义类名为box1的格式*/
.box1 {/*背景色*/background-color: antiquewhite;/*文字颜色*/color: blueviolet;
} 修改样式后
/*定义body背景色*/
body{background-color:#f4f4f4;color:#555555;
}/*定义类名为contener的格式,显示宽度为80%*/
.conteners {margin: auto;width: 80%;
}/*定义类名为box1的格式*/
.box1 {/*背景色*/background-color: antiquewhite;/*文字颜色*/color: blueviolet;
} 5、CSS字体
1)CSS常用字体格式 2字体参考网站
基本文本和字体样式 - 学习 Web 开发 | MDNhttps://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentalshttps://font.google.com/https://font.google.com/
3常见字体属性设置
/*类名为box1中的h1标签中的属性设置*/
.box1 h1{color: #555555 ;/*字体类型*/font-family: Times New Roman,serif;/*字体大小默认16piex*/font-size: 30px;/*字体加粗*/font-weight: bold;/*下划线颜色*/text-decoration: underline;/*字间距*/letter-spacing: 1em;/*词间距*/word-spacing: 2em;
} /*定义类名为box2的格式*/
.box2 {
/* 行距*/line-height: 1.5em;
} 6、CSS盒子模型box
盒子其实就是可以理解为是一个容器我们将一个类称之为一个盒子
1)单个盒子的模型 2多个盒子的布局情况
①错误布局 ②正确情况
两盒子重叠时取最大外边距而不是两个margin的和 3margin指定padding指定一样 /*定义类名为box2的格式*/
.box2 {
/* 行距*/line-height: 1.5em;/*border*/border: 5px aqua solid; /*边粗5px,颜色为实线*/padding-left: 10px ;padding-right: 10px ;padding-top: 10px ;
} 注这里padding\border\margin用法一致不再重复 7、CSS无序列表
HTML
div classlist1ullilist1/lililist2/lililist3/lililist4/li/ul
/div
css
/*修改无序列表前面的符号默认为点*/
.list1{margin: auto;width: 80%;list-style-image: url(yjtp.png);
} 8、CSS给按钮添加属性点击时按下时访问过时
div classbottun stylewidth: 80%;margin: autobuttonsubmit/button
/div
/*按钮添加属性*/
/*鼠标在上面时改变颜色*/
button:hover{background-color: red;
}
/*鼠标在按下时改变颜色*/
button:active{background-color: #555555;
}
/*鼠标在访问后*/
button:visited{background-color: blueviolet;
} 9、CSS布局类型
多个板块进行布局
1三联文字进行布局
html
div classblockp简朴点拿其它项目举例说就是在九秒内跑完百米跑的程度...花滑男单从3A到附近再到现在的4A就是这样前无古人后无来者的跳跃在今天被羽生结弦跳成了完全可以说就是人类体育史上的一个大事件。但也许许多人不知道羽生结弦近两年时间没有教练在身边一个人钻研着前人从未涉足的领域。他甚至没有专门的练习冰场往往只能趁凌晨公共冰场没人时练习。外界媒体的纷扰、本国冰协的打压、恶劣的打分环境……羽生在极其难题的外部前提中始终坚守理想冲击着附近半这一人类极限的跳跃。/p
/div
div classblockp简朴点拿其它项目举例说就是在九秒内跑完百米跑的程度...花滑男单从3A到附近再到现在的4A就是这样前无古人后无来者的跳跃在今天被羽生结弦跳成了完全可以说就是人类体育史上的一个大事件。但也许许多人不知道羽生结弦近两年时间没有教练在身边一个人钻研着前人从未涉足的领域。他甚至没有专门的练习冰场往往只能趁凌晨公共冰场没人时练习。外界媒体的纷扰、本国冰协的打压、恶劣的打分环境……羽生在极其难题的外部前提中始终坚守理想冲击着附近半这一人类极限的跳跃。/p
/div
div classblockp简朴点拿其它项目举例说就是在九秒内跑完百米跑的程度...花滑男单从3A到附近再到现在的4A就是这样前无古人后无来者的跳跃在今天被羽生结弦跳成了完全可以说就是人类体育史上的一个大事件。但也许许多人不知道羽生结弦近两年时间没有教练在身边一个人钻研着前人从未涉足的领域。他甚至没有专门的练习冰场往往只能趁凌晨公共冰场没人时练习。外界媒体的纷扰、本国冰协的打压、恶劣的打分环境……羽生在极其难题的外部前提中始终坚守理想冲击着附近半这一人类极限的跳跃。/p
/div
div stylemargin-top: 1000px/div css .block{/*设置盒子对齐的方式*/float: left;/*三联的宽度比例*/width: 33.3%;/*设置边框属性*/
} 看不出三联加个边距
.block{/*设置盒子对齐的方式*/float: left;/*三联的宽度比例*/width: 33.3%;/*设置边框属性*/border: blueviolet 1px solid;} 但是发现出问题了原因是因为我们设置了1px的边框厚度这样就导致了每一联占比33.3%加上边框就超过了页面宽度因此会无法容下三联。
修改如下
.block{/*设置盒子对齐的方式*/float: left;/*三联的宽度比例*/width: 33.3%;/*设置边框属性*/border: blueviolet 1px solid;/*使得边框粗细不会占据网页大小这样就不会因为边框的原因而导致三联不正常显示*/box-sizing: border-box;
} 2两联进行布局 两联和三联是一样的只是两联一联靠左对齐一联靠右对齐同时也得考虑边框厚度的问题 /*使得边框粗细不会占据网页大小这样就不会因为边框的原因而导致三联不正常显示*/box-sizing: border-box; 3删除多联布局格式
一般在进行完多联布局后需要将格式清除
html——在多联内容后添加
div classclear-fix/div
css
.clear-fix{clear: both;
}
10、CSS定位 相对定位相对于偏移前的位置进行偏移 绝对定位针对页面位置进行偏移即相对页面的绝对坐标 fixed钉在某个位置不管网页怎么移动都在一个位置即相对于电脑窗口的位置不会改变
