在标签上设置style属性:
background-color: #2459a2;
height: 48px;
...

编写css样式:
1. 标签的style属性
2. 写在head里面 style标签中写样式
- id选择区
#i1{
background-color: #2459a2;
height: 48px;
}

- class选择器 ******

.名称{
...
}

<标签 class='名称'> </标签>

- 标签选择器
div{
...
}

所有div设置上此样式

- 层级选择器(空格) ******
.c1 .c2 div{

}
- 组合选择器(逗号) ******
#c1,.c2,div{

}

- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }

PS:
- 优先级,标签上style优先,编写顺序,就近原则

2.5 css样式也可以写在单独文件中
<link rel="stylesheet" href="commons.css" />

3、注释
/* */

4、边框
- 宽度,样式,颜色 (border: 4px dotted red;)
- border-left

5、
height, 高度 百分比
width, 宽度 像素,百分比
text-align:ceter, 水平方向居中
line-height,垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗

6、float
让标签浪起来,块级标签也可以堆叠

老子管不住:
<div style="clear: both;"></div>

7、display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block,可以设置无法设置高度,宽度,padding margin
******
行内标签:无法设置高度,宽度,padding margin
块级标签:设置高度,宽度,padding margin

8、padding margin(0,auto)

前端技术之--CSS的更多相关文章

  1. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  2. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  3. 前端Html和Css面试题

    前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...

  4. HTML5学堂 全新的HTML5/前端技术分享平台

    HTML5学堂 全新的HTML5/前端技术分享平台 HTML5学堂是做什么的? HTML5学堂~http://www.h5course.com~由多名热爱H5的讲师们组成的一个组织.致力于构建一个前端 ...

  5. 百度前端技术学院(IFE)2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  6. 最受欢迎web前端技术总结

    Web前端技术发展非常快,主流技术的进步.想想刚毕业那会用asp技术.目前,该网站已经非常少见主流应用. 后来的后来J2EE框架.然后SpringMVC声望,然而,最近的各种js框架广泛传播,Html ...

  7. web前端教程:CSS 布局十八般武艺都在这里了

      CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...

  8. 前端技术之_CSS详解第一天

    前端技术之_CSS详解第一天 一html部分 略.... 二.列表 列表有3种 2.1 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unorde ...

  9. 前端技术之_CSS详解第二天

    前端技术之_CSS详解第二天 1.css基础选择器 html负责结构,css负责样式,js负责行为. css写在head标签里面,容器style标签. 先写选择器,然后写大括号,大括号里面是样式. & ...

随机推荐

  1. mpvue——另类支持v-html

    前言 最近在用mpvue将之前写的vue项目转化为小程序,但是不支持v-html,也不能说不支持,只不过转化为了rich-text的富文本组件,但是图片显示不全啊 本来想让后端内嵌个样式的,还是算了, ...

  2. 【XSY2903】B 莫比乌斯反演

    题目描述 有一个\(n\times n\)的网格,除了左下角的格子外每个格子的中心里都有一个圆,每个圆的半径为\(R\),问你在左下角的格子的中心能看到多少个圆. \(n\leq {10}^9,R_0 ...

  3. 「【算法进阶0x30】数学知识A」作业简洁总结

    t1-Prime Distance 素数距离 大范围筛素数. t2-阶乘分解 欧拉筛素数后,按照蓝皮上的式子筛出素数. 复杂度:O(nlogn) t3-反素数ant 搜索 t4-余数之和 整除分块+容 ...

  4. Ceph分布式存储(luminous)部署文档-ubuntu18-04

    Ceph分布式存储(luminous)部署文档 环境 ubuntu18.04 ceph version 12.2.7 luminous (stable) 三节点 配置如下 node1:1U,1G me ...

  5. 工作环境换成Ubuntu18.04小记

    Linux汇总:https://www.cnblogs.com/dunitian/p/4822808.html#linux Ubuntu常用软件安装(小集合)http://www.cnblogs.co ...

  6. Ubuntu最常见的包问题

    工作环境换成Ubuntu18.04小记:https://www.cnblogs.com/dunitian/p/9773214.html Ubuntu不得不说的就是这个apt出问题的处理 :(换源就不说 ...

  7. Error: Can't resolve 'babel-loader'

    在控制台中运行命令“webpack”,出现错误:“ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in.... ...

  8. pillow的用法

    这是原图 from PIL import Image im=Image.open('C:/Users/history/Desktop/微信图片_20190408110611.jpg') r,g,b=i ...

  9. CMDB服务器管理系统【s5day90】:API构造可插拔式插件逻辑

    1.服务器端目录结构: 1.__init__.py from django.conf import settings from repository import models import impo ...

  10. spring定时任务详解(@Scheduled注解)

    Spring配置文件xmlns加入 xmlns:task="http://www.springframework.org/schema/task" xsi:schemaLocati ...