认识CSS
2022/4/3 23:19:43
本文主要是介绍认识CSS,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
什么是CSS?
如何css
1.css是什么
2.css怎么用(快速入门)
3.CSS选择器(重点+难点)
4.美化网页(文字美化,阴影,超链接,列表,渐变...)
5.盒子模型
6.浮动
7.定位
8.网页动画(特效)wccc 菜鸟教程
1.1 什么是CSS?
CSS(Cascading Style Sheet) 层叠样式表
CSS :表现层 (美化网页)
字体 ,颜色,边距,高度,宽度,背景图片,网页定义和浮动...
1.2 CSS发展史
CSS1.0
CSS2.0 CSS和HTML分离
CSS2.1 浮动,定位
CSS3.0 圆角,阴影,动画,浏览器兼容性
举例
此时css和html 写在了一起,一般建议html 和css分离
<!--规范,<style> 可以编写CSS的代码 语法: 选择器{ 声明1; <!--每一个声明最好使用分号结尾--> 声明2; 声明3; ... } --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="狂神说Java,西部开源"> <meta name="description" content="来这个地方可以学习Java"> <title>我的第一个网页</title> <style> h1{ color : blue; } </style> </head> <body> <h1>Hello World !</h1> <style> h1{ color : red; } </style> </body> </html>
建议html 和 css 分离
link标签 将分离的html 和css 联系起来
css的优势:
内容和表现分离 网页结构表现统一,可以实现复用 样式十分丰富 建议使用独立于html的css文件 利于SEO,容易被搜索引擎收录! (VUe 不容易被收录)
CSS的三种导入方式 和起作用优先级
1.行内样式
2.内部样式表
3.外部样式表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--外部样式--> <link rel="stylesheet" href="css/style.css"> <!--内部样式--> <style> /*这里面是要写css 不是html的注释方法 css注释方法为/**/ */ h1{ color:green; } </style> </head> <body> <!--行内样式:在标签元素中,编写一个style属性,编写样式即可--> <!--不符合 结构与表现分离的思想--> <h1 style="color:red">我是标题~~</h1> <!--<h1 style="color:red; ..."> 多个的话,分号隔开--> 三种样式优先级高到低(就近原则 (谁离这个代码近,谁优先级高)):行内样式> 外部样式表 ? 内部样式表 <hr> 新版本有变化 :三种样式优先级高到低:行内样式> 外部样式 > 内部样式 </body> </html>
/*外部样式*/ h1{ color:pink; }
优先级:三种样式优先级高到低(就近原则 (谁离这个代码近,谁优先级高)):
行内样式> 外部样式表 ? 内部样式表
新版本有变化 :三种样式优先级高到低:行内样式> 外部样式 > 内部样式
外部样式拓展:(两种写法)
一 :链接式:link标签
html
<!--外部样式--> <link rel="stylesheet" href="css/style.css">
二:导入式:@import url("");
@import url(""); 是 css2.1特有的 ,一般不用这个
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import url("css/style.css"); </style> </head> <body> <h1>123456</h1> </body> </html>
这篇关于认识CSS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-07TailwindCSS从入门到实践:全面指南
- 2024-09-05Tailwind.css入门:快速上手指南
- 2024-08-29CSS9资料:入门级CSS教程与实用技巧指南
- 2024-08-29CSS定位资料大全:初学者入门指南
- 2024-08-29CSS 浮动资料:入门级教程与实践
- 2024-08-29CSS样式入门:快速获取与掌握CSS样式资料的指南
- 2024-07-18CSS中的伪类
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享