网赚妈妈

 找回密码
 立即注册
搜索
查看: 354|回复: 2

[网赚是真的吗] CSS概述、CSS语法、CSS选择器、CSS声明

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-9-10 20:14:20 | 显示全部楼层 |阅读模式

    一、HTML表单


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

    二、CSS

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

    三、CSS如何使用

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

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

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


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

    四、CSS规则特性

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

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

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


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

    五、CSS选择器

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

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

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

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


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

    边框:


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

    边距:


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

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:15:15 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 21:14:40 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-24 07:18 , Processed in 0.154877 second(s), 15 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表