css：又称层叠样式表具体英文单词（好吧，我又不是学英文）

w3c，中文也称之为万维网。网页地址：http://www.w3school.com.cn/ 里面包最详细的教程，但是前提你愿意花费那么多的时间，而且不一定用的到。

css最重要的部分就是选择器了，首先简单说下css为什么出现

早期的页面html的属性，所有内容写在一个页面上显示十分的拥挤，维护起来非常的不方便，这时候css就出来了。

一句话：css实现了网页的结构和样式想分离

html可以把网页的大体结构布置出来，显示我们想要看到的效果

css可以给我们的网页，实现美化而且看起来十分的清晰条例

打开一个页面，如果想看他的具体源代码可以使用快捷键（f12），程序员专用工具

好了，废话一箩筐了，进入正题

css模块：

注释

单行注释：//注释内容

多行注释：/*注释内容（可跨行）*/

结合方式

css也是一种文件，html需要引入这种文件，实现结合，当然结合方式许多：大体三种

第一种：

<!DOCTYPE html>
<html><head><title>01-结合方式1.html</title><meta name="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 结合方式1:html标签上加上style属性. 属性的值填写Css代码.所有标签都有style属性.--></head><body><p style="color:red;">This is my HTML page. </p></body>
</html>

第二种：

<!DOCTYPE html>
<html><head><title>01-结合方式1.html</title><meta name="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 结合方式2:使用head标签中的style标签.设置页面样式.style中填写css代码--><style>p{color:red;}</style></head><body><p style="color:red;">This is my HTML page. </p></body>
</html>

第三种：

建立一个css后缀名的文件如p.css 代码如下

p{color:red;
}

在需要美化的页面引入该文件即可

<!DOCTYPE html>
<html><head><title>03-结合方式3.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 结合方式3:--><link rel="stylesheet" type="text/css" href="p.css"></head><body><p> This is my HTML page. </p></body>
</html>

css语法

<!DOCTYPE html>
<html><head><title>02-结合方式2.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 语法1:选择器{样式属性键: 样式属性值;样式属性键:样式属性值1 样式属性值2 样式属性值3...;/* 注释内容!*/语法2:style="样式属性键: 样式属性值;"}--><style type="text/css">p{color:red;}</style></head><body><p  > This is my HTML page. </p></body>
</html>

css选择器

重点：对于html属性不会的，没有关系，但是css的选择器必须掌握，也是css的重点

选择器1：标签选择器

     <style type="text/css">a{color:blue;}</style></head><body><a> This is my HTML page. </a></body>

选择器2：id选择器，使用id时.要保证id的值在页面中是唯一的

     <style type="text/css">#one{color:yellow;}</style></head><body><a id="one" > This is my HTML page. </a><br><a> This is my HTML page. </a></body>

选择器3：class选择器

<style type="text/css">.one{color:green;}</style></head><body><p>This is my HTML page.</p><p class="one" >This is my HTML page.</p><a class="one" > This is my HTML page. </a><br><a> This is my HTML page. </a></body>

选择器4：伪类选择器:主要配合a标签、但其他标签也可以使用
       选择标签的某个状态.需要配合其他选择器来使用
       l link   未访问过
       v visited   访问过
       h hover   悬浮
       a active   激活,点击

<style type="text/css">a:link{color:green;}a:visited{color:black;}a:hover{color:white;}a:active{color:pink;}</style></head><body><a href="01-结合方式1.html" >点我</a></body>
</html>

选择器5：嵌套组合选择器

<style type="text/css">#one,.two,font{color:green;}</style></head><body><a id="one" >点我</a><p class="two" >点我</a><font>点我</font></body>
</html>

当然这些选择器不是绝对、还要不少其他选择器方式，但是作为最常用的选择器这些必须掌握

字体属性

对于看过前面html的，相比都了解font的有那些属性了吧，比如颜色、大小、等

但是实际开发中使用的却是css

     <style type="text/css">p{font-family: 黑体;font-size: 25px;font-style:oblique;font-weight:900;font-variant:small-caps;} /* p{font:oblique small-caps 900 25px 黑体;} */</style></head><body><p class="two" >hello itcast! itheima!床前明月光,疑是地上霜</a></body>
</html>

而且css还提供了html字体属性之外的属性，虽然html也可以实现，但是为了页面清晰，还是css比较好

对于上述fon标签多个属性值不建议使用，必须要保证其顺序，否则无效果

背景属性

<style type="text/css">/* background : background-color || background-image || background-repeat || background-attachment || background-position
body{background-image: url("mn.jpg");background-repeat: no-repeat;background-attachment: fixed;}*/body{background: url("mn.jpg") no-repeat fixed center;}</style></head><body><p>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br></p><p>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br></p></body>
</html>

background-image：url("")，设置图片路径

background-repeat：no，设置图片是否平铺

background-attachment：fixed，设置图片是否固定

使用background需要注意顺序，否则效果显示不出来

块和行标签

    <!-- 块级标签  => 占据的范围是一行div p  ul li ol,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,行内标签 => 占据的是行中的一部分span a font b .......................--></head><body>helloworld<div>helloworld</div>helloworld<br>helloworld<span>helloworld</span>helloworld</body>
</html>

盒子模型

编程世界：一切皆对象

美工世界：一切皆盒子

<style type="text/css">/*盒子模型的属性一. 边框系类属性二. 尺寸属性三. 边距*内边距*外边距border-color:边框颜色border-width:边框宽度border-style:边框样式border-color: red;border-width: 1px;border-style: solid;margin-left:100px;左外边距margin-top:100px;padding-left:100px; 左内边距padding-top:100px; 上内边距注意:内边距会延长所在盒子的长或宽*/div{border: 1px solid red;}#one{height: 300px;width: 300px;}#two{height: 100px;width: 100px;margin-left:100px;margin-top:100px;}</style></head><body><div id="one" ><div id="two"></div></div></body>
</html>

盒子模型边距

 <style type="text/css">/*padding : 1个值 上下左右2个值    1.上下 2.左右3个值    1.上 2.左右 3.下4个值     1.上 2.右 3.下 4.左*/div{border: 1px solid red;height: 300px;width: 300px;}#one{padding: 10px 30px 50px 80px;}</style></head><body><div id="one" ><div id="two"></div></div></body>
</html>

自己曾仔细想了想，到底要不要说这个呢，最后决定还是说了吧！

定位：

position 1

<style type="text/css">.qq {width: 100px;height: 100px;background-color: #f00;/*固定定位固定地位元素  相对于浏览器窗口进行定位  不管浏览器如何滚动这个元素它的位置不会发生改变定位的坐标  默认在浏览器左上方 或在其父元素中* *//*特点：1、脱标  2、层级比较高  在浏览器上面  所以他会压盖在标准文档流的元素上面  3、不管浏览器如何滚动  固定定位元素的位置不会发生改变*/position: fixed;left: 10px;/*表示离左边有10个像素*/top: 10px;/*表示离上面有10个像素*/</style></head><body><div class="qq"></div><p>HelloWorld<br> HelloWorld<br> HelloWorld<br> HelloWorld<br> HelloWorld<br></p><p>HelloWorld<br> HelloWorld<br> HelloWorld<br> HelloWorld<br> HelloWorld<br></p></body></html>

position2

<style type="text/css">*{padding:0;margin: 0;}.box{width: 600px;border: 1px solid #000;margin: 100px auto;}.div1{width: 100px;height: 100px;background-color: #f00;}.div2{width: 100px;height: 100px;background-color: #0f0;/*相对定位  位置没有发生变化  没有脱标如果没有给相对定位设置定位坐标值  它的位置不会发生改变  坐标值可负top：100px=bottom：-100px如果设置了定位的坐标 相对定位元素的位置就会发生改变如果一旦设置了定位  相对定位元素它会在老家留下一个坑  因为在老家留下一个坑所以他本身很少使用。  相对定位主要作用为了配合绝对定位来使用的因此很少使用*/position: relative;left: 100px;top:100px;}.div3{width: 100px;height: 100px;background-color: #00f;}</style></head><body><!--div.box>div.div$*3--><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></body>
</html>

position3

<style type="text/css">*{padding:0;margin: 0;}.box{width: 600px;border: 1px solid #000;margin: 100px auto;/*gradefather 随着box的fixed的脱标 失去内容 没有高度*//*box的fixed脱标失去实现对窗口定位*//*position: fixed;*//*子绝父相*//*子绝父绝子绝父固*//*背景除外*//*凡是在网页中  一个元素压盖在另一个元素的上面  这种  一般都是使用绝对定位  非常重要*//*position: relative;*/}.div1{width: 100px;height: 100px;background-color: #f00;}.div2{width: 100px;height: 100px;background-color: #0f0;/*绝对定位 1、 脱标 2、不占用空间  他会压盖住标准文档中的元素* 就近原则他会判断其父元素有没有定位属性  如果没有设置它找爷爷元素  以此类推  最后找到body元素*/position: absolute;/*left: 0;bottom: 0;*/left: 40px;top: -40px;}.div3{width: 100px;height: 100px;background-color: #00f;}.gradefather{width: 800px;border: 1px solid #000;margin: 100px auto;position: relative;}</style></head><body><div class="gradefather"><!--div.box>div.div$*3--><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></div></body>
</html>

web前端之css快速入门相关推荐

web前端之js快速入门（BOM和DOM）
BOM:browser object module 浏览器对象模型 BOM 主要处理浏览器窗口和框架 . window对象 open.close 打开(关闭)新的页面,窗口 <script t ...
web前端之js快速入门（ECMAscript）
javascript:首先和java没有任何关系,蹭热度.... 静态网页组成:结构(html).样式(css).动作(javascript 简称 js). 详细教程地址:菜鸟教程 - 学的不仅是技术 ...
前端学习之CSS快速入门-2021-09-20~22
CSS快速入门什么是CSS 如何学习 csst是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字,阴影,超链接,列表,渐变-) 盒子模型浮动定位网页动画(特效效果) ...
Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础切图流程 PC企业站布局 PC游戏站布局溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法兼容与hack 风生水 ...
canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性一.css属性和 ...
小白学Java Web 3 Web前端之CSS基本知识2
这一篇接着上一篇的内容来分享,上一篇还有大量的样式属性没有列出,不过在继续分享之前,我想先来分享一下关于网页的布局相关的一些东西,因为下一篇我打算分享用仅仅前面三小篇的内容来制作一个简单的静态网页, ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...

web前端之css快速入门