第二章、前端之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. labelme

    项目:https://github.com/wkentaro/labelme?tdsourcetag=s_pcqq_aiomsg 说明:https://www.bilibili.com/video/a ...

  2. nginx重新编译不停服

    找到安装nginx的源码根目录,如果没有就下载新的安装包 .tar.gz 查看ngixn版本极其编译参数 /usr/local/nginx/sbin/nginx -V 进入nginx源码目录 cd n ...

  3. ubuntu 18.04设置开机自动挂载移动硬盘

    首先在命令行执行df -h指令,可以看到如下结果: zifeiy@zifeiy-PC1:~$ df -h 文件系统 容量 已用 可用 已用% 挂载点 udev 964M 0 964M 0% /dev ...

  4. python 时间类型

  5. winform 更新文件上传（一）

    using Common; using DevExpress.XtraEditors; using FileModel.UpLoad; using System; using System.Colle ...

  6. redis数据库安装

        一. 简单介绍: REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用A ...

  7. Eureka【启用https】

    上一篇主要说的是开启http basic认证,从安全角度来讲,基于base64编码,容易被抓包后破解,在公网中很不安全,本文详谈如何在eureka server和eureka client中开启htt ...

  8. Mybaties配置一对多关系sql实例

    <!-- resultMap中的type表示返回什么类型的对象 --> <resultMap id="BaseGoods" type="com.cn.h ...

  9. REST架构中的HTTP动词

    POST 增 DELETE 删 PUT 改 GET 查 GET(SELECT):从服务器取出资源(一项或多项). POST(CREATE):在服务器新建一个资源. PUT(UPDATE):在服务器更新 ...

  10. OPENCV运行的问题，自带的程序可以运行，但是自己制作的QT报错

    在PC上跑没问题 qmake 交叉编译后出来的文件 将OPCV和QT的镜像挂载后,在板子上运行程序, 能够出来这个界面,一点击按钮,提示如下错误. . 然而,百度网盘下载的代码.跟上面一样的操作,在板 ...