什么是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>
标签：优先级,认识,样式,html,CSS,css,样式表 来源： https://www.cnblogs.com/intelliyu/p/16097305.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。