第二章、前端之css

一、css介绍

css（Cascading Style Sheet，层叠样式表 ）定义显示html元素

当浏览器读到一个样式表，它会按照这个样式表对这个文档进行渲染

二、css语法

  1. css实例

    每个css样式由两个组成部分：选择器和声明。声明包括属性和属性值；每个声明用一个分号隔开

    h1{
    
color:red;
    
font-size:16px;
    
}

  2. css注释

    /*注释内容*/

三、css几种引入方式

  1. 行内样式

    行内式是在标记的style属性中设定CSS样式。不推荐大规模使用
    
<p style="color: red">Hello world.</p>

  2. 内部样式

    嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
    
<head>
    
　　<meta charset="UTF-8">
    
　　<title>Title</title>
    
　　 <style>
    
　　　　 p{ background-color: #2b99ff; }
    
　　 </style>
    
</head>
    
<body>
    
<p>666</p>
    
</body>

  3. 外部样式

    外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
    
<link href="mystyle.css" rel="stylesheet" type="text/css"/>

四、css选择器

  • 基本选择器
元素选择器

p {color: "red";}


id选择器

#i1 { background-color: red; }


类选择器

.c1 { font-size: 14px; }

p.c1 {

color: red;

}


通用选择器

* { color: white; }
  • 组合选择器
后代选择器

/*li内部的a标签设置字体颜色*/

li a { color: green; }


儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/

div>p { font-family: "Arial Black", arial-black, cursive; }


毗邻选择器(单个)

/*选择所有紧接着<div>元素之后的<p>元素*/

div+p{margin:5px;}


兄弟选择器（多个）

/*i1后面所有的兄弟p标签*/

#i1~p { border: 2px solid royalblue; }
  • 属性选择器


/*用于选取带有指定属性的元素。*/

p[title] { color: red; } /*用于选取带有指定属性title的元素。*/

p[title="213"] { color: green; }/*用于选取带有指定属性和值title="213"的元素。*/
  • 分组嵌套选择器
分组：逗号隔开元素

div, p { color: red; }/*给div和p标签设置同一样式字体为红色*/

嵌套：

.c1 p { color: red; }/*.c1类内部所有p标签设置字体颜色为红色。*/
  • 伪类选择器
/* 未访问的链接 */

a:link { color: #FF0000 }

/* 鼠标移动到链接上 */

a:hover { color: #FF00FF }

/* 选定的链接 */

a:active { color: #0000FF }

/* 已访问的链接 */

a:visited { color: #00FF00 }

/*input输入框获取焦点时样式*/

input:focus { outline: none; background-color: #eee; }
  • 伪元素选择器
first-letter:常用的给首字母设置特殊样式：

p:first-letter { font-size: 48px; color: red; }
  • 选择器的优先级
内联>id>类>元素选择器

五、css属性相关

  1. 设置宽和高
width：

height：

块级标签：可以设置宽高

内联标签：宽度由内容来决定
  1. 字体属性
文字字体：font-family

字体大小：font-size

字重:font-weight
  1. 文本颜色
color:

属性：

十六进制值 - 如: ＃FF0000

一个RGB值 - 如: RGB(255,0,0)

颜色的名称 - 如:  red

rgba(255,0,0,0.3) 0.3是透明度
  1. 文字对齐
text-align:

left	左边对齐 默认值

right	右对齐

center	居中对齐

justify	两端对齐
  1. 文字装饰
text-decoration:

none	默认。定义标准的文本。

underline	定义文本下的一条线。

overline	定义文本上的一条线。

line-through	定义穿过文本下的一条线。

inherit	继承父元素的text-decoration属性的值。

说明：a { text-decoration: none; }
  1. 首行缩进
将段落的第一行缩进 32像素：

p { text-indent: 32px; }

去除li标签的样式

list-style: none;
  1. 文字间离
将文字的间距调整为5像素：

letter-spacing: 5px;
  1. 背景属性
/*背景颜色*/

background-color: red; /*背景图片*/ background-image: url('1.jpg');

/*

背景重复

repeat(默认):背景图片平铺排满整个网页

repeat-x：背景图片只在水平方向上平铺

repeat-y：背景图片只在垂直方向上平铺

no-repeat：背景图片不平铺

*/ background-repeat: no-repeat; /*背景位置*/ background-position: left top;

/*background-position: 200px 200px;*/
  1. 边框border
border-width

border-style

border-color

border-radius：

-----------------------------------------

border-style属性值有：

none	无边框。

dotted	点状虚线边框。

dashed	矩形虚线边框。

solid	实线边框。

----------------------------------------

border-radius：

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形
  1. display属性
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。

display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。

display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。

display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

说明：display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

六、css盒子模型

margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

padding:           用于控制内容与边框之间的距离；

Border(边框):     围绕在内边距和内容外的边框。

Content(内容):   盒子的内容，显示文本和图像

  1. magrin属性

    .margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; }
    
简写：
    
	.margin-test { margin: 5px 10px 15px 20px; }

  2. padding属性

    .padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }
    
简写：
    
	.padding-test { padding: 5px 10px 15px 20px; }

  3. float属性

    在 CSS 中，任何元素都可以浮动。

    浮动元素会生成一个块级框，而不论它本身是何种元素。

    关于浮动的两个特点：

    • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    • 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
    left：向左浮动
    
right：向右浮动
    
none：默认值，不浮动

  4. clear

    clear属性规定元素的哪一侧不允许其他浮动元素。

    值 描述
    left 在左侧不允许浮动元素。
    right 在右侧不允许浮动元素。
    both 在左右两侧均不允许浮动元素。
    none 默认值。允许浮动元素出现在两侧。
    inherit 规定应该从父元素继承 clear 属性的值。 
    清除浮动
    
清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

固定高度
    
伪元素清除法
    
overflow:hidden
    
伪元素清除法（使用较多）：

.clearfix:after { content: ""; display: block; clear: both; }

  5. overflow溢出属性

    值 描述
    visible 默认值。内容不会被修剪，会呈现在元素框之外。
    hidden 内容会被修剪，并且其余内容是不可见的。
    scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    inherit 规定应该从父元素继承 overflow 属性的值。 
    - overflow（水平和垂直均设置）
    
- overflow-x（设置水平方向）
    
- overflow-y（设置垂直方向）


    **max-width最大宽度与min-width最小宽度案例小结**
    
我们设置两个盒子一个“divcss5-min-width”设置对象里img图片最小宽度为200px，而实际图片只有165px，所以图片被拉伸到200px；一个“divcss5-max-width”设置对象里img图片最大宽度为200px限制，而实际对象里图片宽度是375px，这个时候我们设置了此图片最大宽度为200px,所以图片被CSS max-height缩小到200px

  6. position定位属性

    • static

    static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

    • relative（相对定位）

    相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

    注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

    • absolute（绝对定位）

    定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

    重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

    另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

    绝对定位

    • fixed（固定）

    fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

    在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

  7. z-index属性

    #i2 { z-index: 999; }

    设置对象的层叠顺序。

    1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
    2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
    3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
    4. 从父现象：父亲怂了，儿子再牛逼也没用

  8. opacity

    用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

第二章、前端之css的更多相关文章

  1. 第十一章 前端开发-css

    第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...

  2. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  3. CSS+DIV网页样式与布局：第二章：CSS的基本语法

    第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  4. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  5. 第二篇：web之前端之css

    前端之css   前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...

  6. 微信小程序教学第二章：小程序中级实战教程之预备篇 - 项目结构设计 ｜基于最新版1.0开发者工具

    iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享>. ...

  7. 第二章 JavaScript核心语法

    第二章   avaScript核心语法 一.变量的声明和赋值 JavaScript是一种弱类型语言,没有明确的数据类型,也就是在声明变量时不需要指定数据类型,变量的类型由赋给变量的值决定. 在Java ...

  8. 《AngularJS深度剖析与最佳实践》笔记: 第二章 概念介绍

    第二章 概念介绍 2.1 什么是UI? 用户界面包括内容(静态信息+动态信息), 外观, 交互. 在前端技术栈中分别由HTML, CSS和JS负责. 进一步抽象, 分别对应于MVC三个主要部分: Mo ...

  9. springMVC第二章

    springMVC第二章 一.URL 映射 可以同时设置多个URL来访问某个控制器或方法.设置value属性: @RequestMapping(value= {"/grade",& ...

随机推荐

  1. 参照UB单创建DN并过账

    *&---------------------------------------------------------------------* *& Form FRM_DN_POST ...

  2. Python中elasticsearch插入和更新数据的实现方法

    Python中elasticsearch插入和更新数据的实现方法 这篇文章主要介绍了Python中elasticsearch插入和更新数据的实现方法,需要的朋友可以参考下 首先,我的索引结构是酱紫的. ...

  3. delphi type

    声明: 1. type Name = Existing type; 2. type Name = type Existing type; 3. type Name = (EnumValue1 [=va ...

  4. CockroachDB学习笔记——[译]Scaling Raft

    原文链接:https://www.cockroachlabs.com/blog/scaling-raft/ 原作者:Ben Darnell 原文日期:Jun 11, 2015 译:zifeiy 在Co ...

  5. ECS适合你吗？

    实体组件系统处于预览状态.不建议用于生产. 目前有两个很好的理由使用它. 你想试验 这是令人兴奋的新技术,并且大规模性能提升的承诺正在引诱.试试看.给我们您的反馈.我们很乐意在论坛上与您交谈. 您正在 ...

  6. [译]如何使用Python构建指数平滑模型:Simple Exponential Smoothing, Holt, and Holt-Winters

    原文连接:How to Build Exponential Smoothing Models Using Python: Simple Exponential Smoothing, Holt, and ...

  7. 在vue项目中获取当前城市

    在vue项目中使用百度地图获取当前城市:https://www.jianshu.com/p/0819cfd46712 Vue2 :百度地图bmap:https://www.jianshu.com/p/ ...

  8. 带你手写基于 Spring 的可插拔式 RPC 框架（二）整体结构

    前言 上一篇文章中我们已经知道了什么是 RPC 框架和为什么要做一个 RPC 框架了,这一章我们来从宏观上分析,怎么来实现一个 RPC 框架,这个框架都有那些模块以及这些模块的作用. 总体设计 在我们 ...

  9. 局部内部类的final问题

    局部内部类,如果希望访问所在方法的局部变量,那么这个局部变量就必须是final的(或者只赋值一次) 从Java8开始,只要局部变量事实不变那么final关键字可以省略 为什么需要保证变量为final, ...

  10. Linux 下面安装 nginx 以及进行TCP反向代理、负载均衡的过程

    1. 下载安装nginx 注意 因为stream 并不是 nginx自带的module  所以需要 在安装是 通过 --with 的方式增加上. 下载必要的程序包 # openssl wget htt ...