css是什么

　　css（cascading style sheet,可以译为“层叠样式表”），是一组格式设置规则，用于控制web页面的外观

如何让一个标签具有样式

　　第一步：必须保证引入方式正确

　　第二步：必须让css和html元素产生关联，也就是说要先找到这个元素

　　第三步：用相应的css属性去修改html元素样式

css的三种引入形式

　　1、将css内嵌到HTML文件中，这种方式又叫内联样式表，例如

  1. <head>
  2.     ...
  3.     <style type="text/css">
  4.         #box{
  5.             width: 100px;
  6.             height: 100px;
  7.             background: red;
  8.         }
  9.     </style>
  10. </head>

内联样式表

　　2、将一个外部样式链接到HTML文件中，这种方式又叫链接样式表，例如：

  1. <head>
  2.     ...
  3.     <link rel="stylesheet" href="css/index.css" />
  4. </head>

链接外部样式

　　3、将样式表加入到HTML文件中，这种方式又叫做行内样式表

  1. <body>
  2.     <div style="width: 200px;height: 200px;background: green;"></div>
  3. </body>

行内样式

选择器

  1. div {
  2.     属性：属性值；
  3. }

标签选择器

  1. #box {
  2.     属性：属性值；
  3. }
  4.  
  5. <div id='box'></div>

id选择器

  1. .box {
  2.     属性：属性值；
  3. }
  4.  
  5. <div class='box'></div>

类选择器

  1. 相邻选择器可以选择紧跟其后的相邻元素，相邻选择器用+号来连接
  2.  
  3. h1+div {
  4.     width: 100px;
  5.     height: 100px
  6.     background-color: blue;
  7. }
  8.  
  9. <h1>css样式测试</h1>
  10. <div id='div1'></div>
  11. <div id='box'></div>

相邻选择器

  1. 当几个元素有共同属性的时候，可以使用多元素选择器，用逗号隔开
  2.  
  3. h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,textarea,form,input,select,body {
  4.     margin:0;
  5.     padding: 0;
  6. }

多元素选择器

  1. 后代选择器作用于父元素下面的所有子元素
  2.  
  3. #div1 p{
  4.     /*把id为div1的下面的所有p元素的字体设置为红色，这里包括id为box的子元素p*/
  5.     color: red;
  6. }
  7.  
  8. <h1>css样式测试</h1>
  9. <div id="div1">
  10.     <p>一江春水向东流</p>
  11.     <p>飞流直下三千尺</p>
  12.     <div id="box">
  13.         <p>床前明月光</p>
  14.     </div>
  15. </div>

后代选择器

  1. 子元素选择器作用于父元素的子元素，
  2. 元素选择器与后代选择器的区别在于后代选择器可以作用于子孙元素，
  3. 而子元素选择器只能作用于它的子元素
  4.  
  5. #div1>p{
  6.     /*把id为div1的下面的子p元素的字体设置为红色，这里只包含子元素，不包含id为box下面的子元素*/
  7.     color: red;
  8. }
  9.  
  10. <h1>css样式测试</h1>
  11. <div id="div1">
  12.     <p>一江春水向东流</p>
  13.     <p>飞流直下三千尺</p>
  14.     <div id="box">
  15.         <p>床前明月光</p>
  16.     </div>
  17. </div>

子元素选择器

  1. E[attr]匹配所有具有att属性的E元素，不考虑属性的值，例如：input[name],只要有name属性的input元素都会被选中
  2.  
  3. input[name]{
  4.     /*把带有name属性的input元素加上红色边框*/
  5.     border: 1px solid red;
  6. }
  7.  
  8. <form>
  9.     <input type="text" name='ipt1' />
  10.     <input type="text" name='ipt2' />
  11.     <input type="submit" value="提交" />
  12. </form>
  13.  
  14. E[attr=val]匹配所有attr属性值等于val的E元素，例如:input[name=ipt2]，属性值一般不加引号
  15.  
  16. input[name]{
  17.     /*把带有属性name=ipt1的input元素加上红色边框*/
  18.     border: 1px solid red;
  19. }
  20.  
  21. <form>
  22.     <input type="text" name='ipt1' />
  23.     <input type="text" name='ipt2' />
  24.     <input type="submit" value="提交" />
  25. </form>
  26.  
  27. E[attr ~=val]， ‘~’包含的意思，只要属性值包含了val的E元素都会被选中
  28.  
  29. [title~=flower]{
  30.     border: 5px solid yellow;
  31. }
  32.  
  33. <p>title属性中包含单词"flower"的图片会获得黄色边框</p>
  34. <img src="/i/eg_tulip.jpg" title="tulip flower">
  35. <br />
  36. <img src="/i/shanghai_lupu_bridge.jpg" title="lupu bridge">
  37.  
  38. E[attr =val]，""以某个值开头的意思，只要属性值以val开头的E元素都会被选中
  39.  
  40. div[class^="test"]{
  41.     background-color: red;
  42. }
  43.  
  44. <div class="first_test">第一个div元素</div>
  45. <div class="second">第二个div元素</div>
  46. <div class="test_three">第三个ddiv元素</div>
  47.  
  48. E[attr ￥=val]，"$"以某个值结尾的意思，只要属性值以val结尾的E元素都会被选中
  49.  
  50. div[class￥="test"]{
  51.     background-color: red;
  52. }
  53.  
  54. <div class="first_test">第一个div元素</div>
  55. <div class="second">第二个div元素</div>
  56. <div class="test_three">第三个ddiv元素</div>

属性选择器

a标签的4种状态

  • link(未访问链接)
  • hover(鼠标放上状态)
  • visited(已访问链接)
  • active(当前活动链接)
  1. a:link{
  2.     color: red;
  3. }
  4.  
  5. a:visited{
  6.     color: blue;
  7. }
  8.  
  9. a:hover{
  10.     color: yellow;
  11. }
  12.  
  13. a:active{
  14.     color: green;
  15. }
  16.  
  17. <a href="http://nativejs.org">原生js</a>

伪类元素

  1. a:before{
  2.     content: "点我";
  3. }
  4.  
  5. a:after{
  6.     content: "!!!";
  7. }
  8.  
  9. <a href="htpps://www.baidu.com">百度</a>
  10. <p>百度一下你就知道了</p>
  11. <a href="http://nativejs.org">原生js社区</a>

一个使用场景：解决浮动带来的问题

基本属性

  1. /*背景颜色 background-color*/
  2. div{
  3.     height: 200px;
  4.     width: 200px;
  5.     background-color: #ccc;
  6. }
  7.  
  8. /*背景图片 background-image*/
  9. div{
  10.     height: 200px;
  11.     width: 200px;
  12.     background-image: url(img/bg.png);
  13. }
  14.  
  15. /*背景重复 background-repeat*/
  16. div{
  17.     height: 200px;
  18.     width: 200px;
  19.     background-image: url(img/bg.png);
  20.     background-repeat: repeat-x;
  21.     /*
  22.        不添加此属性，则纵向横向都重复
  23.        repeat-x 横向重复
  24.        repeat-y 纵向重复
  25.        no-repeat 不重复
  26.     */
  27. }
  28.  
  29. /*背景位置 background-position*/
  30. background-position: x y;
  31. /*xy分别表示x轴位置和y轴位置*/
  32.  
  33. /*
  34. 横向（left,center,right）
  35. 纵向 (top, center,bottom)
  36. */

背景属性background

  1. /*border-width 边框的宽度*/
  2. div{
  3.     border-style: solid;
  4.     border-width: 15px;  /*边框宽度为15个像素*/
  5.     height: 200px;
  6.     width: 200px;
  7. }
  8.  
  9. /*border-style 边框样式*/
  10. div{
  11.     border-style: dashed;
  12.     border-width: 5px;
  13.     height: 200px;
  14.     width: 200px;
  15.     /*
  16.      边框风格样式的属性值
  17.      none 无边框
  18.      solid  直线边框
  19.      dashed 虚线边框
  20.      dotted 点状边框
  21.      double 双线边框
  22.     */
  23. }
  24.  
  25. /*border-color 边框颜色*/
  26. div{
  27.     border-style: dashed;
  28.     border-width: 5px;
  29.     border-color: red;  /*边框颜色为红色*/
  30.     height: 200px;
  31.     width: 200px;
  32. }
  33.  
  34. /*单独设置某边框 border-left|top|right|bottom*/
  35. div{
  36.     height: 200px;
  37.     width: 200px;
  38.     border-left: 1px solid red;  /*设置左边框样式*/
  39. }
  40.  
  41. /*border-radius 向元素添加圆角边框*/
  42. //为所有角设置圆角
  43. div{
  44.     height: 200px;
  45.     width: 200px;
  46.     border: 2px solid green;
  47.     border-radius: 20px;   /*所有角设置圆角的幅度为20px*/
  48. }
  49.  
  50. //后面给两个值
  51. div{
  52.     height: 200px;
  53.     width: 200px;
  54.     border: 2px solid green;
  55.     border-radius: 10px 30px;   /*上左下右10px, 上右下左30px*/
  56. }
  57.  
  58. //后面给三个值
  59. div{
  60.     height: 200px;
  61.     width: 200px;
  62.     border: 2px solid green;
  63.     border-radius: 10px 0 30px;   /*上左10px, 上右下左0， 下右30px*/
  64. }
  65.  
  66. //后面给四个值
  67. div{
  68.     height: 200px;
  69.     width: 200px;
  70.     border: 2px solid green;
  71.     border-radius: 10px 20px 30px 40px;   /*上左,上右,下右,下左*/
  72. }
  73.  
  74. //设置半圆
  75. //把高度设置成宽度的一般，并且只设置下左和下右两个叫的值，设置的值为宽度的一般
  76. div{
  77.     height: 100px;
  78.     width: 200px;
  79.     border: 2px solid green;
  80.     border-radius: 0px 0px 100px 100px;   /*上左,上右,下右,下左*/
  81. }
  82.  
  83. //设置圆形
  84. //把高度和宽度设置成一样，并把4个圆都设置成宽高一般
  85. div{
  86.     height: 200px;
  87.     width: 200px;
  88.     border: 2px solid green;
  89.     border-radius: 50%;
  90. }

边框属性border

  1. /*RGB模式: 红(R)、，绿(G)、蓝(B)每个的取值范围0-255*/
  2.  
  3. p{
  4.     color: rgb(0,255,0);
  5. }
  6.  
  7. /*RGBA模式: A表示色彩的透明度，取值范围是0-1*/
  8. p{
  9.     background-color: rgba(200,255,255,0.5);
  10. }
  11.  
  12. /*16进制*/
  13. p{
  14.     background-color: #ccc;
  15. }
  16.  
  17. /*颜色名称*/
  18. p{
  19.     color: red;
  20. }

颜色属性

  1. /*字体类型 font-family: 可以写多个字体，用“，”隔开，以确保当字体不存在的时候直接用下一个 */
  2. p{
  3.     font-familt: 宋体, serif;
  4. }
  5.  
  6. /*字体大小 font-size*/
  7. p{
  8.     font-size: 14px;
  9. }
  10.  
  11. /*字体加粗 font-weight: 默认是normal, bold(粗)、bloder(更粗)、lighter(更细)*/
  12. p{
  13.     font-weight: bold;
  14. }

字体属性font

  1. /*横行排列 text-align , center居中，left靠左，right靠右 */
  2. p{
  3.     text-align: center;
  4. }
  5.  
  6. /*文本行高 line-height*/
  7. p{
  8.     text-align: center;
  9.     height: 50px;
  10.     line-height: 50px ; /*文本行高和盒子高度一致就会垂直居中*/
  11. }
  12.  
  13. /*首行缩进 text-indent*/
  14. p{
  15.     text-indent: 50px;
  16. }
  17.  
  18. /*字符间距*/
  19. p{
  20.     letter-spacing: 10px;
  21. }

文本属性

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. img.top {vertical-align:text-top}
  5. img.bottom {vertical-align:text-bottom}
  6. </style>
  7. </head>
  8.  
  9. <body>
  10.  
  11. <p>
  12. 这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
  13. </p> 
  14.  
  15. <p>
  16. 这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
  17. </p>
  18.  
  19. </body>
  20.  
  21. </html>

垂直对齐

第2天-css快速入门的更多相关文章

  1. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  2. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  3. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  4. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

  5. Html与CSS快速入门04-进阶应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...

  6. HTML/CSS快速入门

    Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...

  7. #001 CSS快速入门讲解

    CSS入门讲解 HTML人+CSS衣服+JS动作=>DHTML CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已 CSS 干啥用的 ...

  8. CSS快速入门例子

    CSS入门应用 01-结合方式01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  9. CSS快速入门基础篇，让你快速上手（附带代码案例）

    1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...

  10. 02-03 CSS快速入门

    css四种引入方式:test.html: p{ color: gold; font-size: 20px; } title.html: <!DOCTYPE html> <html l ...

随机推荐

  1. BZOJ 3629 JLOI2014 聪明的燕姿 约数和+DFS

    根据约数和公式来拆s,最后再把答案乘出来,我们发先这样的话递归层数不会太大每层枚举次数也不会太多,然而我们再来个剪枝就好了 #include<cstdio> #include<ios ...

  2. BZOJ4008. [HNOI2015]亚瑟王 期望概率dp

    看到这道题想什么? 一个好转移的状态由于T最多444所以把每个点控制在O(400000)以内,所以对于n和r最多乘一次因此猜f[n][r],f[r][n],首先一轮一轮的搞不好转移,那么先想一想f[n ...

  3. [hdu 4348]区间修改区间查询可持久化线段树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4348 一开始把lazy标记给push_down了,后来发现这样会让持久化变乱,然后想到不用push_d ...

  4. 安卓sdk安装教程

    http://blog.csdn.net/love4399/article/details/77164500

  5. Kafka自我学习-报错篇

    1. kafka启动出现:Unsupported major.minor version 52.0 错误,  具体的错误输出: Exception in thread "main" ...

  6. 设计模式开篇综述(Java)

    设计原则是规范,设计模式是技巧.如果在项目中能够灵活运用这些基础知识,那么我相信一定会得到意想不到的收获. 接下来的时间里,我将继续学习设计模式,将对每一个设计模式从以下几点进行分析和学习,如有不妥当 ...

  7. 对request.getSession(false)的理解（附程序员常疏忽的一个漏洞）

    本文属于本人原创,转载请注明出处:http://blog.csdn.net/xxd851116/archive/2009/06/25/4296866.aspx [前面的话] 在网上经常看到有人对req ...

  8. Bzoj3441 乌鸦喝水

    Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 258  Solved: 97 Description [题目背景]     一只乌鸦在自娱自乐,它在面 ...

  9. [HNOI2015]部分题解

    Day1 T2 [HNOI2015]接水果 风见幽香非常喜欢玩一个叫做 osu!的游戏,其中她最喜欢玩的模式就是接水果.由于她已经DT FC 了The big black,  她觉得这个游戏太简单了, ...

  10. #error,在xib文件中拷贝按钮所造成的错误.

    https://www.evernote.com/shard/s227/sh/3e35a7b3-f40c-46df-8ae0-e7522310c18b/742311974127f12eaafae07a ...