欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

CSS概述、语法、选择器、声明

 一、HTML表单

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Insert title here</title>
  7. </head>
  8. <body>
  9. <!-- 1.表单元素
  10. 用来声明数据提交的范围
  11. 只有在此元素内的数据可以提交给服务器 -->
  12. <!-- action属性用来声明数据提交的目标 -->
  13. <form action="http://www.baidu.com">
  14. <!-- 2.表单控件
  15. 用来让用户输入数据的
  16. 1)input元素(9个 ),它们之间用type元素区分-->
  17. <!-- 文本框
  18. value:设置默认值 maxlength:设置最大长度 readonly:设置只读 -->
  19. <p>
  20. 账号:<input type="text" value="lcz" maxlength="10"/>
  21. </p>
  22. <!-- 密码框 属性同上 -->
  23. <p>
  24. 密码:<input type="password">
  25. </p>
  26. <!-- 单选框 name:组名。同一组名互相排斥
  27. checked设置默认选中-->
  28. <p>
  29. 性别:
  30. <input type="radio" name="sex" checked="checked"/>男
  31. <input type="radio" name="sex"/>女
  32. </p>
  33. <!-- 多选框 checked:设置默认选中 -->
  34. <p>
  35. 兴趣爱好:
  36. <input type="checkbox" checked="checked"/>音乐
  37. <input type="checkbox" checked="checked"/>看书
  38. <input type="checkbox"/>打球
  39. </p>
  40.  
  41. <!-- 文件框 -->
  42. <p>
  43. 头像上传:<input type="file"/>
  44. </p>
  45.  
  46. <!-- 隐藏框 -->
  47. <p>
  48. <input type="hidden" value="abc"/>
  49. </p>
  50.  
  51. <!-- 按钮
  52. submit:提交表单中的数据
  53. reset:将表单中的数据重置为初始值
  54. button:没有任何功能,需通过js定义功能 -->
  55. <p>
  56. <!-- 提交按钮 -->
  57. <input type="submit" value="注册">
  58. <!-- 重置按钮 -->
  59. <input type="reset" value="重置">
  60. <!-- 普通按钮 -->
  61. <input type="button" value="按钮">
  62. </p>
  63. <!--2)其他元素(3个) -->
  64. <!-- label:用来管理表单中的文本 id:是元素的唯一标志,相当于元素的身份证号,任何元素都可以由id,程序员有义务保证元素的id不重复
  65. 可以将文本与空间绑定在一起,从而增加了控件的受力面积。-->
  66. <p>
  67. <input type="checkbox" id="xieyi"/>
  68. <label for="xieyi">我已阅读并且自愿遵守此协议!</label>
  69. </p>
  70. <!-- select:下拉选 selected:设置默认选中 -->
  71. <p>
  72. 城市:
  73. <select>
  74. <option>请选择</option>
  75. <option selected="selected">北京</option>
  76. <option>上海</option>
  77. <option>广州</option>
  78. <option>深圳</option>
  79. <option>杭州</option>
  80. </select>
  81. </p>
  82. <!-- textarea:文本域 -->
  83. <p>
  84. 简介:<br>
  85. <textarea rows="10" cols="100">这是文本域的默认值</textarea>
  86. </p>
  87. </form>
  88. </body>
  89. </html>

二、CSS

CSS指层叠样式表,样式定义如何显示HTML元素,样式通常存储在样式表中。

三、CSS如何使用

内联方式:样式定义在单个的HTML元素中

内部样式表:样式定义在HTML页的头元素中

外部样式表:将样式定义在一个外部的CSS文件中(.css)由HTML页面引用样式表文件

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>css样式演示</title>
  7. <!-- 2.内部样式:在head元素里style标签里写样式,此样式可以被当前页面上众多元素复用 -->
  8. <style type="text/css">
  9. /*css的注释*/
  10. h2{color:red;}
  11. </style>
  12. <!-- 3.外部样式:在单独的css文件中写的样式,哪个网页引用该文件,这个网页就能复用这些样式 -->
  13. <link rel="stylesheet" href="my.css">
  14. </head>
  15. <body>
  16. <!-- 1.内联样式:在元素的style属性内直接写样式,此样式 无法复用 -->
  17. <h1 style="color: #00bcd4;">CSS</h1>
  18. <h2>CSS有三种样式</h2>
  19. <p>1.内联样式</p>
  20. <p>2.内部样式</p>
  21. <p>3.外部样式</p>
  22. </body>
  23. </html>

四、CSS规则特性

继承性:父元素的声明可以被子元素继承,如字体、颜色等。

层叠性:同一个元素若存在多个css规则,对于不冲突的声明可以叠加

优先级:同一个元素若存在多个css规则,对于冲突的声明以优先级高着为准。

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>css优先级演示</title>
  7. <style type="text/css">
  8. /*1.继承性:父元素的样式可以被子元素继承(颜色、字体)*/
  9. body{
  10. font-family:"楷体","微软雅黑";
  11. }
  12.  
  13. /*2.层叠性:给一个元素设置不同的声明,其效果会叠加*/
  14. h1{
  15. color:red;
  16. }
  17. h1{
  18. font-size:50px;
  19. }
  20. /*3.优先级:给同一个元素设置相同的声明,效果以后者为准,即就近原则*/
  21. h2{
  22. color:green;
  23. }
  24. /*.....*/
  25. h2{
  26. color:yellow;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <h1>HELLO WORLD!</h1>
  32. <h2>你好,世界!</h2>
  33. </body>
  34. </html>

五、CSS选择器

元素选择器:通过元素名来选择css作用的目标 比如<p>、<h1>等

类选择器:允许以一种独立于文档元素的方式来指定样式 语法为:.className{}

id选择器:选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式,它仅作用于id属性的值*/

选择器组:写出一组选择器选中每个选择器所对应目标的并集

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>选择器演示</title>
  7. <style type="text/css">
  8. /*2.类选择器:选择class等于某值的所有元素,class是程序员根据逻辑自己给元素增加的分类*/
  9. .day{
  10. color: blue;
  11. }
  12. /*3.id选择器:选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式,它仅作用于id属性的值*/
  13. #fighting{
  14. color:red;
  15. }
  16. /*4.选择器组:写出一组选择器选中每个选择器所对应目标的并集*/
  17. .day,#fighting{
  18. font-weight: bold;
  19. }
  20. /*5.派生选择器*/
  21. /*5.1选择某元素的子孙*/
  22. #p5 b{
  23. color:red;
  24. }
  25. /*5.2选择某元素的儿子*/
  26. #p5>b{
  27. font-size: 30px;
  28. }
  29.  
  30. /*6.伪类选择器:根据元素的状态选择选择器*/
  31. /*6.1选择未访问过的超链接*/
  32. a:link{
  33. color:green;
  34. }
  35. /*6.2选择已访问过的超链接*/
  36. a:visited {
  37. color: red;
  38. }
  39. /*6.3选择激活态(正在点)的按钮*/
  40. #i1:active{
  41. background-color: blue;
  42. }
  43. /*6.4选择有焦点的文本框、密码框、文本域*/
  44. #i2:focus {
  45. background-color: green;
  46. }
  47. /*6.5选择鼠标悬停态(触碰)的图片*/
  48. img:hover{
  49. width: 250px;
  50. height: 250px;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <p class="day">昨天又是忙碌的一天</p>
  56. <p>今天也是忙碌的一天</p>
  57. <p class="day">后天又是忙碌的一天</p>
  58. <p id="fighting">不管怎么样,生活还得继续呀</p>
  59.  
  60. <p id="p5">
  61. 北京市<u>海淀区<b>200号5号楼</b></u><b>5号房</b>
  62. </p>
  63.  
  64. <p>
  65. <a href="http://www.baidu.com">百度</a>
  66. <a href="http://www.taobao.com">淘宝</a>
  67. <a href="http://error.com">错误的网站</a>
  68. </p>
  69.  
  70. <p>
  71. <input type="button" value="按钮" id="i1">
  72. </p>
  73.  
  74. <p>
  75. <input type="text" id="i2">
  76. </p>
  77.  
  78. <p>
  79. <img alt="" src="../images/lcz.jpg">
  80. </p>
  81. </body>
  82. </html>

边框:

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Insert title here</title>
  7. </head>
  8. <style type="text/css">
  9. /*1.四个边设置相同的边框*/
  10. p{
  11. border:1px dashed red;
  12. }
  13. /*2.单个边设置边框*/
  14. /*left/right/top/bottom*/
  15. h1{
  16. border-left: 10px solid blue;
  17. }
  18. /*3.块元素一般宽度默认是100%,高度为自适应,内容越多,它越高。当给他固定高度时,可能会导致内容溢出,*/
  19. p{
  20. width: 300px;
  21. height: 60px;
  22. /*溢出时的处理*/
  23. overflow:auto;
  24. }
  25. </style>
  26. <body>
  27. <h1>李白</h1>
  28. <p>
  29. 李白(701年-762年) ,字太白,号青莲居士,又号“谪仙人”,是唐代伟大的浪漫主义诗人,
  30. 被后人誉为“诗仙”,与杜甫并称为“李杜”,为了与另两位诗人李商隐与杜牧即“小李杜”区别,
  31. 杜甫与李白又合称“大李杜”。据《新唐书》记载,李白为兴圣皇帝(凉武昭王李暠)九世孙,
  32. 与李唐诸王同宗。其人爽朗大方,爱饮酒作诗,喜交友。
  33. </p>
  34. </body>
  35. </html>

边距:

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Insert title here</title>
  7. <style type="text/css">
  8. div{
  9. border:1px solid red;
  10. width:100px;
  11. height:100px;
  12. }
  13. /*1.四个边设置相同的边距()*/
  14. #d1{
  15. padding:20px;
  16. margin:30px;
  17. }
  18. /*2.四个边设置不同的边距(上右下左)*/
  19. #d2{
  20. padding:10px 20px 30px 40px;
  21. margin:40px 30px 20px 10px
  22. }
  23. /*3.单个边设置边距
  24. left/right/top/bottom*/
  25. #d3{
  26. padding-left: 20px;
  27. margin-bottom: 40px;
  28. }
  29. /*4.对边设置相同的边距*/
  30. /*先上下 后左右*/
  31. #d4{
  32. padding:20px 40px;
  33. margin:30px 10px;
  34. }
  35. /*5.对边设置边距的特例*/
  36. /*在设置外边距时,若左右外边距值为auto,则该元素水平居中*/
  37. #d5{
  38. margin:20px auto;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div id="d0">d0</div>
  44. <div id="d1">d1</div>
  45. <div id="d2">d2</div>
  46. <div id="d3">d3</div>
  47. <div id="d4">d4</div>
  48. <div id="d5">d5</div>
  49. </body>
  50. </html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r50692.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-07-23 13:00 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。