Web前端之CSS_day1-2
1、div和span
div的语义是division“分割”； span的语义就是span“范围、跨度”
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
span是一个“文本级”的标签, 表达“小区域、小跨度”
span里面只能放置文字、图片、表单元素
HTML 超文本标记语言 从语义的角度描述页面结构。
CSS 层叠式样式表 从审美的角度负责页面样式
。 JS JavaScript 从交互的角度描述页面行为。
2、css介绍
2.1 css写法：
内嵌式
|
1
2
3
4
5
6
7
|
<head> <meta charset="UTF-8"> <title>安保天下</title> <style type="text/css"> 写在这里 </style></head> |
特点：
1. css代码和html代码没有完全分离
2. 影响范围只有当前页面
外联式（独立写在一个文件中）
|
1
2
3
4
5
|
<head> <meta charset="UTF-8"> <title>安保天下</title> <link rel="stylesheet"href="style.css"></head> |
特点：
1. 影响范围比较广，影响整个站点
2. css代码和html代码完全分离
行内样式（在标签中使用style属性写css样式，多个属性用分号隔开）
特点：
1. css代码和html代码完全没有分离
2. 只能影响当前标签样式
2.2 css常见属性
color:red; 字体颜色
font-size:18px; 字体大小
background-color:green; 背景颜色
font-weight: bold/normal; 字体是否加粗
font-style: italic/normal; 字体是否斜体
text-decoration: underline/none; 是否有下划线
text-indent: 2em; 首行缩进2空格
text-align: center/left/right; 文字居中
text-decoration: none 将下划线去掉
2.3 css常用类名
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
3、css基础选择器
3.1 标签选择器
所有的标签，都可以是选择器
3.2 ID选择器
ID选择器命名规范：
1）只能有字母、数字、下划线
2）必须以字母开头
3）不能和标签同名。比如id不能叫做body、img、a
注意：
一个HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！
一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义
3.3 类选择器
.就是类的符号。类的英语叫做class。所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性，class属性可以重复
所以要总结：
1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
2） 同一个标签可以同时携带多个类。
3） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
4） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用
4、css高级选择器
4.1 后代选择器
后代选择器，标签之间一定是嵌套关系（父与子的关系）
后代选择器，选择器之间用空格隔开
4.2 标签指定式选择器
标签名.类名{属性:值;}，他们是既又得关系。
4.3 并集选择器
选择器,选择器{属性:值;}
5、其他
5.1 font属性联写
注意：
1.font属性联写 必须有font-size 和font-family
2.font属性联写 必须按照顺序写
5.2 盒子居中
margin:0 auto;
6、html标签分类
6.1 块级元素
div,p,h...
特点：
1.独自占用一行
2.可以设置宽度和高度
3.当盒子发生嵌套关系，子盒子没有设置宽度的情况下，子盒子的宽度和父盒子的宽度一样
6.2 行内元素
span,a,font...
特点：
1.所有标签都在一行上显示
2.一般情况下行内元素不能设置宽度和高度
6.3 行内块元素
img,input...
特点：
1.所有元素在一行上显示
2.可以设置宽度和高度
7、html模式转换
7.1 行内元素--->块级元素
7.2 行内元素--->行内块元素
7.3 块元素--->行内元素
8、CSS特性
8.1 层叠性
层叠性发生的原因：
1.样式发生冲突，最后定义的样式会将前面的样式给覆盖掉（层叠掉）
8.2 继承性
继承性：一定有标签的嵌套关系存在
1.文字颜色 color可以实现继承
2.文字大小 font-size 可以实现继承
3.在块级元素中，width可以实现继承
4.行高line-height 可以实现继承的
总结：所有涉及文字大小，颜色，字体。。。都可以实现继承。
特例：
1.超链接标签“a”不能继承文字颜色（自己的颜色把父元素中的颜色层叠掉）
2.标题标签不能继承font-size
8.3 优先级
标签选择器< 类选择器< ID选择器< 行内样式< !important
1 10 100 1000 10000
第一个特点：继承的权重（优先级）为0；
第二个特点：权重会叠加。
9、伪类
a:link{} 超链接未访问的样式
a:visited{} 超链接访问过后的样式
a:hover{} 鼠标放到超链接上的样式
a:active{} 链接激活的样式
a:focus 获取焦点的样式
注意：伪类使用一定要按照顺序去写
10、CSS背景属性介绍
10.1 background-color 设置背景颜色
10.2 background-image:url("bg.jpg") ; 设置背景图片（注意：背景图片默认情况下左上角对齐）
10.3 设置背景平铺
background-repeat: no-repeat; 设置背景不平铺
background-repeat: repeat-x; 设置横向平铺
background-repeat: repeat-y; 设置纵向平铺
10.4 设置背景位置
background-position 设置背景位置
Left| right| top| bottom| center
background-position: left;
注意：设置明确的方位名称，两个方位名词没有先后顺序，如果只写一个，那么相当于第二为居中
background-position: 20px right;
注意：如果background-position中有数字，那么第二数字一定代表纵向方向
background-attachment: fixed; 设置图像固定显示
background-attachment: scroll; 设置图像滚动
10.5 背景属性联写（和font属性联写相比，没有顺序可言）
background:background-color| background-image| background-repeat| background-attachment| background-position
Web前端之CSS_day1-2的更多相关文章
- Web前端需要熟悉大学里【高大上】的计算机专业课吗？
作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...
- web前端开发分享-目录
1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web前端的春天 or 噩梦
「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- [转载]Web前端开发工程师编程能力飞升之路
[背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
- web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
随机推荐
- Scalding初探之一：基于Scala的Hadoop利器
把你从写繁琐的Map-reduce Job中解放出来,写分布式跟写本地程序没两样,Scala真真代表着先进生产力的方向啊. 好的,今天开始直播基于Scala的Scalding啦,循序渐进地看以下页面: ...
- PAT (Advanced Level) Practise：1008. Elevator
[题目链接] The highest building in our city has only one elevator. A request list is made up with N posi ...
- 华为HG255D路由器使用OH3C进行中大校园网认证
之前用的上海贝尔RG100A-AA路由器,被我无情地摧残了,电源按钮挂了,只能换个路由器.由于在校内,使用OP还是比较方便的,网上淘了这款华为HG255D,店主已刷好OP,无线速率300M,想想也是值 ...
- Jena TDB 102
1 Introduction TDB is a RDF storage of Jena. official guarantees and limitations TDB support full ra ...
- 关于js判断鼠标移入元素的方向--解释
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
- android之 listview加载性能优化ViewHolder
在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...
- MQTT服务器搭建-mosquitto1.4.4安装指南
Mosquitto mosquitto是一款实现了 MQTT v3.1 协议的开源的消息代理服务软件. 其提供了非常轻量级的消息数据传输协议,采用发布/订阅模式进行工作,可用于物联设备.中间件.APP ...
- [redis] redis.clients.jedis.exceptions.JedisDataException: MOVED 13102 127.0.0.1
这个异常上网查了很久才知道原因: MOVED indicates that you're using Redis Cluster. ShardedJedis is not for Redis Clus ...
- SpringMVC学习系列-后记 开启项目的OpenSessionInView
在系列的 SpringMVC学习系列(12) 完结篇 的示例项目中,由于当时考虑到OpenSessionInView会对性能有一定的影响,所以就没有配置项目的OpenSessionInView.在ma ...
- Apache + PHP 环境搭建
环境: Win7 64位 php-5.6.19-Win32-VC11-x64 httpd-2.4.18-win64-VC11 下载地址: php: http://windows.php.net/do ...