web前端开发1
一.前端三剑客之css
 1.选择器:由标签/类/id单独或组合出现
 2.作用域:{}内部区域
 3.样式块:满足css链接语法的各种样式
 eg:引入的基本样式
 <head>
  <style>                   <!-- 选择器div  作用域{}  样式块color: red --> 
   div {
    color: red                        
    background-color: cyan;
    font-size: 100px   <!-- css语法必须书写;最后一条样式可以省略 -->
   }
  </style>
 </head>
二.再html引入css的三种方式 : 行间式 | 内联式 | 外联式
 1.行间式
  <!-- 1.在标签头部的style属性内 -->
  <!-- 2.属性值满足的是css语法 -->
  <!-- 3.属性值用key: value形式赋值,value具有单位 -->
  <!-- 4.属性值之间用;隔开 -->
  <div style="width: 100px; height: 100px; </div>
 2.内联式
  <!-- 1.在style标签内(style标签一般作为head的子标签) -->
  <!-- 2.属性值满足的是css语法 -->
  <!-- 3.属性值用key: value形式赋值,value具有单位 -->
  <!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
  <!-- 5.格式: 选择器{样式块} -->
  <head>  
   <style>      
    div {width: 100px;
    height: 100px;           
    background-color: red;       
    }   
   </style>
  </head>
  <body> 
   <div></div> 
  </body>
 3.外联式
  <!-- 1.在外部css文件中 -->
  <!-- 2.属性值满足的是css语法 -->
  <!-- 3.属性值用key: value形式赋值,value具有单位 -->
  <!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
  <!-- 5.格式: 选择器{样式块} -->
  <!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接) -->
  file: zero.css
  div {
   width: 100px;   
   height: 100px;   
   background-color: red; }
  file: zero.html
  <head>   
   <link rel="stylesheet" type="text/css" href="css/zero.css" />
  </head>
 4.三种引入方式的优先级
  注:三种方式间没有优先级 -->
  <!-- 1.三种方式协同布局: -->
  <!-- 2.不重复的属性一定为唯一位置的唯一值 -->
  <!-- 3.重复的属性采用覆盖赋值,保留最后位置的属性值 -->
  <!-- 4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式) -->
  <!-- 5.!important会影响优先级 -->
三.css中长度级颜色单位
 1.长度单位
  px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
  mm：毫米
  cm：厘米
  in：英寸
  pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
  em：相当长度，通常1em=16px，应用于流式布局
   div {
    width: 100px;      <--长-->
    width: 720pt; 10in
    width: 100mm; 10cm
    width: 10em; 通常160px 10rem
    width: 50vw; 50% view width  <--view width表示页面长度-->
    height: 100px;      <--宽-->
 2.颜色单位*/
  rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
  rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
  hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
  hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
  #AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc
   div {
    background-color: cyan;
    background-color: rgb(255, 0, 0);
    background-color: rgba(255, 0, 0, 0);                 
    background-color:  #a0c   <-- 满足AABBCC形式可以简写为abc -->
    }
四.常用样式
 1.字体样式
  span {
   1.大小:符合长度单位
    font-size: 30mm;
   2.字重:  bold(粗字体)  normal(更粗字体)  lighter(细字体 ) 100~900(100最细,900最粗)
    font-weight: 900;
   3.行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示
    line-height: 50mm;
   4.样式: 一般不关心
    font-style: normal;
   5.字族:可以自定义字族,
    font-family: "Segoe UI Emoji", "微软雅黑";  <--当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 -->
   6.字体样式整体设置    css语法: 空格隔开为多个值赋值, ,隔开为一个值多值赋值
    font: lighter  50mm/80mm "Segoe UI Emoji", "微软雅黑";
   }
 2.文本样式
  span {
   1.颜色:符合颜色单位
    color: red;
   2.水平居中方式:left(左) center(居中) right(右)
    text-align: center;
   3.字划线: underline line-through overline none
    text-decoration: overline;
   4.字间距
    letter-spacing: 3px;
   5.词间距
    word-spacing: 10px;
  }
  a {
   6.应用场景
    text-decoration: none;
  }
  div {
    width: 300px;
   7.显示方式
    display: inline-block;
  }
  div {
    font-size: 12px;
   8.垂直排列方式: top baseline bottom
    vertical-align: baseline;
   9.缩进
    text-indent: 2em;
  }
      <--遇到连体的英文,html将其解析为一个单词(作为一个整体)-->
  .div {
   10.按标签的设定宽度强行换行,可以在单词(整体)内部换行
    word-break: break-all;
  }
 3.背景样式
  div {
   1.背景图片
    background-image: url("data/bg_repeat.gif");   url(背景图片地址)
   2.平铺: no-repeat  repeat-x  repeat
    background-repeat: no-repeat;
   3.定位
   10px == 10px center 设置一个值,第二个值默认为center
   10px 10px 第一个值控制水平位置,第二个值控制垂直位置
    background-position: right center;
   4.定位相关的涉及到滚动时的效果: scroll fixed
    background-attachment: fixed;
  }
  div {
   5.整体设置(顺序不可变)
    background: url("data/bg_repeat.gif") 10px 10px no-repeat red;
  }
五.选择器
 1.基础选择器*/
  1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)
   * {
    border: solid;
   }
  2.标签选择器(标签名):匹配指定标签名的对应所有标签
   div {
    width: 100px;
    height: 100px;
    background-color: red;
   }
  3.类选择器(.):匹配指定类名对应的所有标签
   .dd {
    font-size: 50px;
   }
  4.id选择器(#):匹配指定id名对应的唯一标签*
   #ele {
    color: blue;
   }
  5.总结:
   1.通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式)
   2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
    html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个
   3.类选择器为布局首选(建议基本全用class选择器进行布局)
  6.基本选择器优先级:id > class > 标签 > 通配

day44前端开发2之css基础的更多相关文章

  1. 从零开始学习前端开发 — 2、CSS基础

    一.CSS简介  1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...

  2. day44前端开发1之html基础

    web前端开发1一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体 标签:由< ...

  3. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  4. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  5. 好程序员web前端开发测验之css部分

    好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font si ...

  6. 15款不容错过的前端开发Javascript和css类库 - 2017版本~

    前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, Core ...

  7. WEB前端开发--2（HTML基础）

    HTML基础 HTML不分大小写 1.HTML概述 HTML(HyperText MarkUp Language)"超文本标记语言",他是制作网页的标准语言 1.1 标签--元素 ...

  8. 《JavaScript &amp; jQuery交互式Web前端开发》之JavaScript基础指令

           在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎 ...

  9. 从零开始学习前端开发 — 6、CSS布局模型

    一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...

随机推荐

  1. Favorite Donut（HDU 5442）最小表示法+二分

    题目给出一个字符串,由a~z表示甜度,随字典序增大,字符串首尾相连形成一个圈,要求从一个位置开始字典序最大的字符串,输出位置以及是顺时针还是逆时针表示.顺时针用0表示,逆时针用1表示. 此题只需要查找 ...

  2. jQuery基础之二

    jQuery基础之二   jQuery的中文文档十分详细,并且权威.W3C的jQuery文档更加简单实用. jQuery 1.9.0 jQuery中文文档W3C的jQuery文档 jQuery操作DO ...

  3. 《大型网站系统与Java中间件实现》有感

    头一次只用了一周的时间就看完一本书<大型网站系统与Java中间件实现>,这本书是关于设计方面的,提到了服务框架,消息中间件,数据访问层,以及如何解决应用之间的调用,解耦,以及应用和存储之间 ...

  4. 单线拨号上网时RouterOS内网端口映射的配置

    很多时候routeros 是通过单线拨号上网,假设PPP接口名为pppoe-out1 若需要添加内网ip=18.16.1.92主机的3389端口映射 ,可以在命令行键入: ip firewall na ...

  5. CodeForce Div 2 C. Masha and two friends

    题目链接: http://codeforces.com/contest/1080/problem/C 思路:双向延长两个矩形方块的4边,会形成一个被分割为9块的更大立方体. 计算所有的9个方框.方框中 ...

  6. RESTful摘要

    一种标准的模式的格式化URL为 /version/resource/key 例如,映射一个标识为"rasmus"的人 /v1/people/rasmus 安全性:安全的方法,获取资 ...

  7. 在SAS数据步中执行过程步的简单示例

    SAS中的许多过程步都是封装好的,而且SAS的编程特点决定了只能是DATA步执行完之后再执行PROC步,或者PROC步执行完之后再执行DATA步.因此有时候DATA步只能利用PROC步执行完之后的结果 ...

  8. 代理设计模式在auto_ptr及smart_ptr中的体现

    下面这段代码是auto_ptr的实现: class Image { public: Image(string name): m_imageName(name) {} virtual ~Image() ...

  9. CentOS7用yum快速搭建LAMP平台

    实验环境: [root@nmserver-7 html]# cat /etc/redhat-release CentOS release 7.3.1611 (AltArch) [root@nmserv ...

  10. MySQL面试题中：主从同步部署介绍

    主从同步部署1.两台相同版本的mysql数据库,一台做主库,一台从库 主库开启binlog 在配置文件中的[mysqld]模块中添加log-bin=mysql-bin和server-id=1,一定要保 ...