1divspan

div的语义是division“分割”; span的语义就是span“范围、跨度”

div标签是一个容器级标签,里面什么都能放,甚至可以放div自己

span是一个“文本级”的标签, 表达“小区域、小跨度”

span里面只能放置文字、图片、表单元素

HTML   超文本标记语言  从语义的角度描述页面结构
    CSS    层叠式样式表    从审美的角度负责页面样式

。   JS     JavaScript 从交互的角度描述页面行为

2css介绍

  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

3css基础选择器

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) 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用

4css高级选择器

4.1 后代选择器

后代选择器,标签之间一定是嵌套关系(父与子的关系)

后代选择器,选择器之间用空格隔开

    

4.2 标签指定式选择器

标签名.类名{属性:值;},他们是既又得关系。

4.3 并集选择器

选择器,选择器{属性:值;}

5、其他

5.1 font属性联写

注意:

1.font属性联写 必须有font-size  和font-family

2.font属性联写  必须按照顺序写

5.2 盒子居中

margin:0 auto;

6html标签分类

6.1 块级元素

div,p,h...

特点:

1.独自占用一行

2.可以设置宽度和高度

3.当盒子发生嵌套关系,子盒子没有设置宽度的情况下,子盒子的宽度和父盒子的宽度一样

6.2 行内元素

span,a,font...

特点:

1.所有标签都在一行上显示

2.一般情况下行内元素不能设置宽度和高度

6.3 行内块元素

img,input...

特点:

1.所有元素在一行上显示

2.可以设置宽度和高度

7html模式转换

7.1 行内元素--->块级元素

7.2 行内元素--->行内块元素

7.3 块元素--->行内元素

8CSS特性

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           获取焦点的样式

注意:伪类使用一定要按照顺序去写

10CSS背景属性介绍

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的更多相关文章

  1. Web前端需要熟悉大学里【高大上】的计算机专业课吗?

    作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...

  2. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  3. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  4. web前端的春天 or 噩梦

    「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...

  5. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  6. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  7. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  8. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  9. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

  10. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

随机推荐

  1. EntityFramework 实体映射到数据库

    EntityFramework实体映射到数据库 在Entity Framework Code First与数据表之间的映射方式实现: 1.Fluent API映射 通过重写DbContext上的OnM ...

  2. ✡ leetcode 167. Two Sum II - Input array is sorted 求两数相加等于一个数的位置 --------- java

    Given an array of integers that is already sorted in ascending order, find two numbers such that the ...

  3. Sublime Text 2 配置

    设置Python的Tab缩进为四个空格,打开一个Py文件 # Preferences---->Settings-More---->Syntax Specific-User # 贴入如下代码 ...

  4. myeclipse启动tomcat报错cannot find a free socket for debugger

    解决办法,命令行输入netsh winsock reset,winsock是Windows网络编程接口,winsock工作在应用层,它提供与底层传输协议无关的高层数据传输编程接口 netsh wins ...

  5. Docker之Web-UI

    DockerUI 不支持多主机Command: docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock dock ...

  6. mysql 主从 重新同步

    mysql 主从同步一担出了问题之后,就会导致从库上的数据和主库不一样了.所以需要生新同步数据. 1.登录主库服务器,进入mysql,命令为:mysql -uroot -ppassword 2.执行: ...

  7. python 模块openpyxl读excel文件

    使用openpyxl模块来读取excel.要注意openpyxl读不再支持旧的xls格式. 先看一下操作前的excel是什么样子吧.对了,现在只支持xlsx格式的excel读取 我现在想在第三行插入3 ...

  8. SSIS 基础知识

    微软 BI 系列随笔 - SSIS 2012 基础 - SSIS 基础知识 SSIS 介绍 SSIS - SQL Server Integration Services 是用于实现企业级数据集成和数据 ...

  9. shell终极操作

    1.安装zsh Mac : 直接看下一节 Redhat/centos :sudo yum install zsh Ubuntu :sudo apt-get install zsh 2.安装oh my ...

  10. List和Map之间的转换和关联

    首先,Map.values返回的是此Map中包含的所有值的collection视图. 然后利用ArrayList的构造器ArrayList(Collection<? extends E> ...