css入门学习
1:认识CSS
　　1.1：css简介，css全称是层叠样式表，Cascading style sheets
　　1.2：css的作用，主要是用于定义html内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等
　　　　使用css样式的一个好处是通过定义某个样式，可以让不同的网页位置的字体有着统一的字体，字号或者颜色等

　　1.3：css代码语法
　　　　css样式由选择器和声明组成，而声明又由属性和值组成
　　　　h1 { color:red;font-size:14px;}
　　　　选择器 属性 值{属性和值构成声明}

　　　　选择器：指明网页中要应用样式规则的元素
　　　　声明：在英文大括号"{}"中的就是声明，属性和值之间用英文冒号":"分割。当有多条声明时，中间可以英文分号":"分隔

　　　　css注释代码

2：CSS基本知识（就近原则）
　　　　2.1：内联式css样式，直接写在现有的html标签中
　　　　2.2：嵌入式css样式，写在当前的文件中
　　　　2.3：外部式css样式，写在单独的一个文件中，使用link引入
　　　　　　css样式文件名以称以有意义的英文字母命名
　　　　　　rel="stylesheet" type="text/css"是固定的写法，一定要写到link标签内不可修改
　　　　　　语法格式(<link href="" rel="stylesheet" type="text/css">)
　　　　　　<link>标签位置一般写在<head>标签之内
　　　　2.4：优先级
　　　　　　内联式>嵌入式>外部式

3：CSS选择器
　　3.1：什么是选择器
　　　　每一条css样式声明或者定义由两部分组成(选择器（样式）)
　　3.2：标签选择器
　　3.3：类选择器
　　　　《实际开发过程中使用类选择器最多》
　　　　类选择器名称(css样式代码;)
　　3.4：ID选择器
　　　　为标签设置id="id名称"，而不是class="类名称";
　　　　ID选择符的前面是#号，而不是英文圆点(.);
　　　3.5：类和ID选择器的区别
　　　　相同点：可以应用于任何元素
　　　　不同点：(1)ID选择器只能在文档中使用一个，与类选择器不同，在一个HTML文档中，ID选择器只能使用一个，而且仅一次，而类选择器可以使用多次
　　　　　　　　(2)可以使用类选择器词列表方法为一个元素同时设置多个样式，我们可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，id选择器是不可以的，不能使用id词列表
　　　　ID选择器优先于类选择器
　　3.6：子选择器
　　　　还有一个比较有用的的选择器子选择器，即大于符号>，用来选择指定标签元素的第一代元素
　　3.7：包含(后代)选择器
　　　　包含选择器，即加入空格，用于选择指定标签元素下的后辈元素，如右侧代码编辑器中的代码。
　　3.8：通用选择器(了解即可)
　　　　*{color:red;}

　　　　　*{margin:0;padding:0}//去掉页面样式　
　　3.9：伪类选择符(一般用在链接的标签上面)
　　　　伪类选择器：a:link正常连接的方式
　　　　a:hover:鼠标放上去的样式
　　　　a:active:选择链接时的样式
　　　　a:visited:已经访问过的链接的样式
　　3.10：分组选择符

案例实验如下，运行结果暂不演示

  1.  <html>
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4.      <title>实验</title>
  5.      <!--外部式css样式-->
  6.      <link href="3.html" rel="stylesheet" type="text/css"/>
  7.      <!--嵌入式css样式-->
  8.      <style type="text/css">
  9.          p{color:red;font-size:60px;}
  10.          div{color:blue;text-align:center;}
  11.          input{background-color:black;color:white}
  12.          table{text-align:center;border:1px red solid;}
  13.          .p1{font-family:"楷体";font-size:24px;}
  14.          .p2{font-family:"宋体";font-size:36px;}
  15.      </style>
  16.  </head>
  17.  <body>
  18.      <p>实验的内容</p>
  19.  
  20.      <!--内联式css样式-->
  21.      <div style="font-size:30px">
  22.          今晚吃牛排
  23.      </div>
  24.      <!--选择器的使用-->
  25.      <form>
  26.          账号<input type="text" name="userId"><br/>
  27.          密码<input type="password" name="pw"><br/>
  28.          <div>好好学习将来涨工资</div>
  29.      </form>
  30.      <table>
  31.          <thead>
  32.              <tr>
  33.                  <th>编号</th>
  34.                  <th>姓名</th>
  35.                  <th>性别</th>
  36.                  <th>年龄</th>
  37.              </tr>
  38.          </thead>
  39.          <tbody>
  40.              <tr>
  41.                  <td>10010</td>
  42.                  <td>别先生</td>
  43.                  <td>男</td>
  44.                  <td>22</td>
  45.              </tr>
  46.              <tr>
  47.                  <td>10010</td>
  48.                  <td>别先生</td>
  49.                  <td>男</td>
  50.                  <td>22</td>
  51.              </tr>
  52.              <tr>
  53.                  <td>10010</td>
  54.                  <td>别先生</td>
  55.                  <td>男</td>
  56.                  <td>22</td>
  57.              </tr>
  58.          </tbody>
  59.          <tfoot>
  60.              <tr>
  61.                  <td colspan="4">合计</td>
  62.              </tr>
  63.          </tfoot>
  64.      </table>
  65.      <!--类选择器的用法-->
  66.      <div>
  67.          <h1>春晓</h1>
  68.          <p class="p1">春眠不觉晓，处处闻啼鸟</p>
  69.          <p class="p2">夜来风雨声，处处闻啼鸟</p>
  70.      </div>
  71.  </body>
  72.  </html>
  1.  body{background-color:green;}
  1.  <html>
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4.      <title>实验</title>
  5.      <style type="text/css">
  6.          /*{background-color:blue;}*/
  7.          #p1{font-family:"宋体";color:blue
  8.          ;font-size:30px;}
  9.          .p3{font-size:10px;color:yellow;}
  10.          .p2{font-size:40px;color:red;}
  11.          p > strong{color:red;font-size:15px;}
  12.          ul > li{color:blue;font-size:20px;}
  13.          table{font-size:25px;color:red; text-align="center";}
  14.          table tr th{font-size:20px;color:yellow;}
  15.          table tr td{font-size:25px;color:white;background-color:black;}
  16.          <!--display:inline(效果是不显示下划线)-->
  17.          .b1 li{display:inline;}
  18.          .b1 a{text-decoration:none;}
  19.          .b1 a:link{text-decoration:none;text-align:center;font-size:20px;}
  20.          .b1 a:hover{font-size:30px;color:red;}
  21.          .b1 a:active{font-size:40px;color:blue;}
  22.          .b1 a:visited{font-size:80px;color:blink;}
  23.          <!--分组选择符-->
  24.          p,h3{color:blue;background:yellow;font-size:30px;}
  25.      </style>
  26.  </head>
  27.  <body>
  28.      <ul class="b1">
  29.          <li><a href="#">首页</a></li>
  30.          <li><a href="#">公司简介</a></li>
  31.          <li><a href="#">公司产品</a></li>
  32.          <li><a href="#">联系我们</a></li>
  33.          <li><a href="http://www.baidu.com">百度</a></li>
  34.      <ul>
  35.      <p>javaweb工程师</p>
  36.      <h3>android工程师</h3>
  37.      <!--id选择器的用法-->
  38.      <p id="p1">今天是二零一六年八月十八日</p>
  39.      <!--class选择器使用多个样式，后定义的显示出来-->
  40.      <p class="p2 p3">春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少</p>
  41.      <!--子选择器-->
  42.      <p>锄禾日当午，<strong>汗滴</strong>禾下土，<strong>谁知</strong>盘中餐，粒粒皆辛苦</p>
  43.      <ul>
  44.          <li>html</li>
  45.          <li>css</li>
  46.          <li>javascript</li>
  47.          <ul>
  48.              <li>html</li>
  49.              <li>css</li>
  50.              <li>javascript</li>
  51.          </ul>
  52.      </ul>
  53.      <!--包含选择器的使用联系；标签内设置样式必须使用=如border="1px";-->
  54.      <table border="1px">
  55.          <thead>
  56.              <tr>
  57.                  <th>编号</th>
  58.                  <th>姓名</th>
  59.                  <th>性别</th>
  60.                  <th>年龄</th>
  61.              </tr>
  62.          </thead>
  63.          <tbody>
  64.              <tr>
  65.                  <td>10010</td>
  66.                  <td>别先生</td>
  67.                  <td>男</td>
  68.                  <td>22</td>
  69.              </tr>
  70.              <tr>
  71.                  <td>10010</td>
  72.                  <td>别先生</td>
  73.                  <td>男</td>
  74.                  <td>22</td>
  75.              </tr>
  76.              <tr>
  77.                  <td>10010</td>
  78.                  <td>别先生</td>
  79.                  <td>男</td>
  80.                  <td>22</td>
  81.              </tr>
  82.          </tbody>
  83.          <tfoot>
  84.              <tr>
  85.                  <td colspan="4">合计</td>
  86.              </tr>
  87.          </tfoot>
  88.      </table>
  89.  
  90.  </body>
  91.  </html>
  1.  <html>/*实现某行特定元素的标记*/
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4.  <!--link href="*.css" rel="stylesheet" type="text/css">-->
  5.      <title>实验</title>
  6.      <style type="text/css">
  7.          p:nth-child(2){
  8.              background:#ff0000;
  9.          }
  10.      </style>
  11.  </head>
  12.  <body>
  13.      <div>
  14.          <h1>悯农</h1>
  15.          <p>锄禾日当午</p>
  16.          <p>汗滴禾下土</p>
  17.          <p>谁知盘中餐</p>
  18.          <p>粒粒皆辛苦</p>
  19.  
  20.      </div>
  21.  </body>
  22.  </html>

4：常见属性(百度搜索在线API,查询更多字体属性，火狐浏览器使用火狐firbug进行前段开发调正)
　　4.1：颜色属性
　　　　color属性定义文本的颜色
　　　　color：green;
　　　　color:#ff6600;
　　　　color:#f60;
　　　　color:rgb(255,255,255);
　　　　color:rgba(255,255,255,1);
　　4.2：字体属性
　　　　font-size:字体大小
　　　　font-famliy:定义字体
　　　　font-weight:字体加粗
　　4.3：背景属性
　　　　背景颜色：background-color;
　　　　背景图片：background-image;
　　　　背景重复：background-repeat;
　　　　背景位置：background-position;
　　　　简写方式：
　　4.4：文本属性
　　　　text-align:横向排列
　　　　line-height:文本行高
　　　　　　(1):%基于字体大小的百分比行高
　　　　　　(2):数值来设置固定值
　　　　text-indent:首行缩进
　　　　letter-spacing:字符间距
　　　　属性值：normal默认，length设置具体的数值，可以设置负数，inherit继承
　　　4.5：边框属性
　　　　4.5.1:边框风格border-style;
　　　　(1):统一风格(简写风格)border-style;
　　　　(2):单独定义某一方向的边框样式
　　　　border-bottom-style:下边框样式
　　　　border-top-style:上边框样式
　　　　border-left-style:左边框样式
　　　　border-right-style:右边框样式
　　(3):边框风格样式的属性值
　　　　none:无边框
　　　　solid:直线边框
　　　　dashed:虚线边框
　　　　dotted:点状边框
　　　　double:双线边框
　　　　groove:吐槽边框
　　　　ridge:垄状边框
　　　　inset inset边框
　　　　outset outset边框
　　　　inherit继承
　　　　依托border-color的属性值
　　4.5.2:边框颜色border-color;
　　(1):统一风格(简写风格)
　　　　border-color;
　　(2):单独风格
　　　　border-top-color:上边边框颜色
　　　　border-bottom-color:下边边框颜色
　　　　border-left-color:左边边框颜色
　　　　border-right-color:右边边框颜色
　　(3):属性值
　　　　颜色值得名称：red,yellow;
　　　　RGB:rgb(255,255,0,0.1)
　　　　十六进制：#ff0,#ffff00;
　　(4):属性值的四种方式
　　　　一个值：border-color：(上,下,左,右)
　　　　两个值：border-color：(上,下)(左,右)
　　　　三个值：border-color：(上)(下,左)(右)
　　　　四个值：border-color：(上)(下)(左)(右)
　　4.5.3:简写方式

  1.  <html>
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4.  <!--link href="*.css" rel="stylesheet" type="text/css">-->
  5.      <title>实验</title>
  6.      <style type="text/css">
  7.          body{background:yellow;
  8.              /*background-color:blue;*/
  9.              /*background-image:url(image/1.jpg);*/
  10.          }
  11.          .p1{text-align:center;
  12.              <!--行距-->
  13.              line-height:120%;
  14.              <!--首行缩进-->
  15.              text-indent:;
  16.              <!--字体之间的间距-->
  17.              letter-spacing:15px;
  18.          }
  19.          .p2{
  20.              width:300px;
  21.              height:450px;
  22.              border-color:red;
  23.              <!--边框的实线或者虚线-->
  24.              border-top-style:dashed;
  25.              border-left-style:solid;
  26.              border-bottom-style:dashed;
  27.              border-right-style:solid;
  28.          }
  29.      </style>
  30.  </head>
  31.  <body>
  32.      <p>锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦</p>
  33.      <p class="p1">好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，
  34.      天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，
  35.      好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，
  36.      天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，
  37.      好好学习，天天向上，</p>
  38.      <div class="p2">
  39.      </div>
  40.  </body>
  41.  </html>

5：DIV+CSS布局
　　5.1：div和span
　　　　div和span在整个html标记中，没有任何意义，他们的存在就是为了应用css样式
　　　　div和span的区别在于，span是内联元素，div是块级元素
　　5.2：盒模型
　　　　5.2.1:margin
　　　　　　盒子外边距
　　　　5.2.2:padding
　　　　　　盒子内边距
　　　　5.2.3:border
　　　　　　盒子边框宽度
　　　　5.2.4:width
　　　　　　盒子宽度
　　　　5.2.5:height
　　　　　　盒子高度
　　5.3：布局相关的属性
　　　　5.3.1：position定位方式
　　　　　　(1):正常定位：relative
　　　　　　(2):根据父元素进行定位：absolute
　　　　　　(3):根据浏览器窗口进行定位：fixed
　　　　　　(4):没有定位：static
　　　　　　(5):继承inherit
　　　　5.3.2：定位
　　　　　　左left 右right 上top 下bottom离页面顶点的距离
　　　　5.3.3：z-index层覆盖先后顺序(优先级)
　　　　5.3.4：display显示属性(学习的重点)
　　　　　　　　display:none层不显示
　　　　　　　　display:block块状显示，在元素后面换行，显示下一个块元素
　　　　　　　　display:inline内联显示，多个可以显示在一行内

　　　　5.3.5：float浮动属性
　　　　　　left:左浮动
　　　　　　right:右浮动

 

  1.  <html>
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4.  <!--link href="*.css" rel="stylesheet" type="text/css">-->
  5.      <title>实验</title>
  6.      <style type="text/css">
  7.          .p1{
  8.              width:300px;
  9.              height:400px;
  10.              background-color:yellow;
  11.              margin:50px;
  12.              padding:50px;
  13.              border:10px blue dashed;
  14.              <!--浮动属性-->
  15.              float:right;
  16.          }
  17.      </style>
  18.  </head>
  19.  <body>
  20.      <div class="p1">
  21.          <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="200px" height="300px" title="盒模型"/>
  22.      </div>
  23.      </body>
  24.  </html>

  1.  <html>
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4.  <!--link href="*.css" rel="stylesheet" type="text/css">-->
  5.      <title>实验</title>
  6.      <style type="text/css">
  7.          .p1{
  8.              <!--绝对定位-->
  9.              position:absolute;
  10.              left:100px;
  11.              top:100px;
  12.              border:5px red solid;
  13.              <!--设置覆盖-->
  14.              z-index:;
  15.          }
  16.          .p2{
  17.              position:absolute;
  18.              left:100px;
  19.              top:200px;
  20.              border:5px blue solid;
  21.              z-index:;
  22.          }
  23.      </style>
  24.  </head>
  25.  <body>
  26.      <div class="p1">
  27.          <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="300px" height="400px"/>
  28.      </div>
  29.      <div class="p2">
  30.          <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="300px" height="400px"/>
  31.      </div>
  32.      </body>
  33.  </html>

CSS入门级学习的更多相关文章

  1. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  2. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  3. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...

  4. （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  5. （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

    1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...

  6. 前端学习：CSS的学习总结(图解）

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  7. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  8. 关于Html+css阶段学习总结

    一.学习经历 进入大学不久,就加入了社团,从而对前端有了一个初步的了解,之后也做过一些学校的官网,积累了一些微小的经验. 到了大二的时候,学校开设了专门的html+css课程,从中也学到许多新的htm ...

  9. Boostrap入门级css样式学习

    1. 自适应网页设计 首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" cont ...

随机推荐

  1. Selenium2+python自动化5-操作浏览器基本方法

    前言 前面已经把环境搭建好了,这从这篇开始,正式学习selenium的webdriver框架.我们平常说的 selenium自动化,其实它并不是类似于QTP之类的有GUI界面的可视化工具,我们要学的是 ...

  2. UzysAssetsPickerController中文化

    self.labelSelectedMedia.text = NSLocalizedStringFromTable(@"Choose a media", @"UzysAs ...

  3. js判断用户是否禁用了cookie

    function CookieEnable() { var result = false; if (navigator.cookiesEnabled) return true; document.co ...

  4. mysql死锁问题解决步骤

    锁表产生的原因 锁表的具体情况 解决锁表问题 1.查询是否锁表 show OPEN TABLES where In_use > 0; 2.查询进程 show processlist; 查询到相对 ...

  5. 剑指offer题目31-40

    面试题31:连续字数组的最大和 public class Solution { public int FindGreatestSumOfSubArray(int[] array) { int len ...

  6. mormot 数据集转换为JSON字串

    mormot 数据集转换为JSON字串 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graph ...

  7. php中or的含义

    or其实是Php中的短路或 经常看到这样的语句: $file = fopen($filename, r) or die("抱歉,无法打开: $filename"); or在这里是这 ...

  8. 不要轻易delete void*指针，这样会隐藏比较多的错误。

    #include<iostream> using namespace std; class Object{ void* data; const int size; const char i ...

  9. App lifecycle（UWP深入学习一）

    https://msdn.microsoft.com/en-us/library/windows/desktop/br211474.aspx Launching, resuming, and back ...

  10. tesseract api C++使用例子

    转自:https://code.google.com/p/tesseract-ocr/wiki/APIExample APIExample API examples Updated Aug 12, 2 ...