博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
2019前端「HTML+CSS」零基础入门之 CSS学习笔记
阅读量:3897 次
发布时间:2019-05-23

本文共 3872 字,大约阅读时间需要 12 分钟。

目录

                  


2019前端「HTML+CSS」零基础入门

浏览器 = shell(外壳)+内核

市场主流浏览器是什么?是在市场占有一定份额并有自主研发的内核的浏览器。

市场主流浏览器
浏览器 内核
IE trident
Firefox     Gecko
Google chrome Webkit/blink
Safari Webkit
Opera presto

HTML、CSS、JavaScript三者分工不同。 

HTML              负责结构

CSS                负责样式
JavaScript       负责行为

CSS中只有一种注释形式:/*    */    快捷键:ctrl键+?

课时4 css初级篇-css引入css基础选择器选择器权重

CSS的完整拼写:Cascading Style Sheet ,意思是层叠样式表。CSS是用来装修HTML的。

引入css的三种形式:

1.行间样式css

            
        document        
     

2.页面级css 

            
        document         
     

3.外部css文件

/*style.css*/div{	width:100px;	height:100px;	background-color:red;}
            
        document
        
     

选择器

1.id选择器:      #(id名)

比如某个元素 id="only"  ,  #only 即可选择到这个元素(id和元素的关系是1对1)。

2.类选择器        .(class名)

比如某个元素 class="demo"  ,  .demo 即可选择到这个元素(class和元素的关系是多对多);

多个class属性的连接用空格即可,比如 class="demo  demo1" 表示元素同时拥有“demo”和“demo1”两个class属性。

3.标签选择器       标签名

直接 标签名 加 花括号{} 即可修改标签样式。

比如:选择所有div标签

4.通配符选择器 选择所有元素。

优先级:

!important>行间样式>id选择器>类选择器=属性选择器([属性/属性=属性值])>标签选择器>通配符选择器   

CSS权重(256进制)
!important Infinity
行间样式 1000
id选择器 100
class选择器|属性选择器|伪类 10
标签选择器|伪元素 1
通配符选择器 0

课时5 css复杂选择器,权重计算问题,css基础属性

1.父子选择器/派生选择器   (不一定要用标签选择器,可用其他选择器替代)  形式:父亲+空格+子孙

示例1:div下的所有span    

示例2: strong下的所有em   

示例3:  div下所有的em   

2.直接子元素选择器  形式:父亲+'>'+儿子

示例:div下的直接儿子em    div > em

3.并列选择器(按顺序且不带空格) 

示例:

4.分组选择器

复杂选择器优先级:同行选择器对应权重之和比较大小(权重相同后面覆盖前面的)

CSS字典

基本用法:

设置颜色的三种形式:

1.纯英文单词(示例:red)

2.颜色代码(三原色rgb,示例:#ff4400,每两位表示一种原色的饱和度,依次是红绿蓝)
3.颜色函数(示例:rgb(255,255,255))

border —— 盒子边框:

                    

课时6 css企业开发经验、习惯,盒子模型,层模型

字体默认高度为16px.

实现字体在按钮中水平垂直居中: 文本所占高度=容器高度(line-height=height)

实现文本首行缩进两个位置:

一个像素(px)只能表示一种颜色。1 em=1 font-size 。

行为、样式、结构相分离:

模仿a标签:(蓝色、下划线、聚焦变小手)

伪类选择器(最常用 -  :hover  表示鼠标聚焦的效果):

实现聚焦背景变色,如下图:

    转换:display属性

如行级转块级:

去除图片之间的空隙:

连续几张图片放在一起为什么会有空隙?因为

 

   ——>  

盒子模型:

先定义功能,后选择。

意思就是先写好css样式,写html的时候调用所需要的样式即可,这样比较有利于模块化分工,省时间精力。

自定义标签:

意思就是初始化标签,比如说baidu检索的时候关键字显示红色,查看源代码发现使用的是<em>标签,而<em>标签的原始css并不是这样的,但是我们可以自定义。

当标签的某些固定属性是我们不需要或者不想要的时候,我们可以通过自定义标签来改变标签的初始样式。

再讲几个栗子,比如a标签我们不想要下划线和蓝色,比如ul标签不想要圆点和间距。为了清晰一点我把背景变成黄色。

初始:            自定义:

一般每个标签都会自带padding和margin属性,但是有时我们不想要他们自带的间隔大小,所以最好用通配符选择器取消所有标签的自带间隔属性。 为什么这样最好呢?因为通配符选择器权重为0,如果想要自定义也不会冲突。

什么是盒子模型?就是针对HTML的每个元素都可以作为一个盒子。

盒子的三大组成部分:盒子壁border + 内边距padding + 盒子内容(width+height)

盒子模型=外边距margin+border+padding+(content=width+height)

浏览器以左边上边为墙,也就是说设置外边距的时候元素会往右下或者左上变化。

控制台:

右键点击控制,出现控制台界面,点击Elements,出现HTML+CSS的展示。

在CSS区域旁边就是盒子模型,鼠标移到哪,对应的区域就会变色。

当我们想要设置一个元素居中时,可以嵌套元素盒子把内容大小设置成一样大。比如:

padding是一个复合属性,padding:10px等同于 padding:10px 10px 10px 10px,设置padding: 10px 20px 30px 40px如下图:

四个值时顺序:上,右,下,左;三个值时顺序:上,左右,下;两个值时顺序:上下,左右;一个值:上下左右。

还可以单独设置padding-top,padding-left,padding-right,padding-bottom。

尝试做个远眺图,如下图:

这里只有三层:

有了margin就能隔开元素和元素。

原始:      自定义:

定位:在特定位置出现特定元素

绝对定位absolute:

设置左边线距离左边:left属性;右:right;上:top;下:bottom。

body标签自带的margin属性的值为8px,所以生成的元素不会紧贴页面边框。

绝对定位的特点:

1.脱离原来位置进行定位(变成不同层面的元素,不占有另一层面的空间)

2.相对于最近的有定位的父级进行定位,如果没有就相对于文档定位

相对定位relative:

相对定位的特点:

1.保留原来位置进行定位(变成不同层面的元素,占有另一层面的空间)

2.相对于自己原来的位置进行定位

                                

                   

使用定律:用relative做参照物,用absolute定位 。

广告定位fixed:

就是平时遇到的页面上那种不管页面怎么动位置都不变的广告的定位。自己试试:

如何居中定位? 首先left和top属性设置为50%,又由于定位是以元素的左上角为参照的,所以还需要修改margin-left和margin-top往左和往上移动一半的宽和一半的长。如下:

课后练习

作业:显示一个五环,并要求在屏幕居中的位置。

提示:

  1. z-index属性表示z轴也就是第几层次,靠近观察者为正;
  2. 设置圆形用border-radius:50%;

 

            
        document
        
br*500+Tab键     
/*style.css*/*{	margin: 0;	padding: 0;}.dv1,.dv2{	position: fixed;	left: 50%;	top: 50%;}.dv1{	margin-left:-150px ;	margin-top: -100px;	width: 300px;	height: 100px;	z-index: 1;}.dv2{	margin-left:-100px ;	margin-top: -50px;	width: 200px;	height: 100px;	z-index: 2;}.cir{	display: inline-block;	width: 80px;	height: 80px;	border: solid 6px;	border-radius: 50%;}.demo1{	border-color: blue;	margin-right: 7px;}.demo2{	border-color: black;	margin-right: 7px;}.demo3{	border-color: red;}.demo4{	border-color: yellow;	margin-right: 11px;}.demo5{	border-color: green;}

 

转载地址:http://zefen.baihongyu.com/

你可能感兴趣的文章
WIFI之升级协议列表
查看>>
MCU之STM32可用硬件(外部接口)一览表
查看>>
MySql之设备管理的数据表设计列表
查看>>
WIFI之系统启动的脚本配置
查看>>
Python之服务器模块设计学习
查看>>
WIFI之3GControl模块调度草图
查看>>
WIFI之系统部署环境
查看>>
C++之UML关系说明图
查看>>
网络之Snmp的学习总结
查看>>
WIFI之服务器系统设计组成
查看>>
Linux之Arinc驱动设计草图
查看>>
Linux之grub.conf的内容介绍
查看>>
网址之Curl API整理说明
查看>>
Python之ftp的用法整理
查看>>
MStar之公司简介
查看>>
STB之业务架构图
查看>>
WebKit之Port篇幅介绍
查看>>
WebKit之Binding案例(testCallback.idl)
查看>>
WebKit之binding分析案例(testInterface.idl)
查看>>
WebKit之binding案例分析(testMediaQueryListListener.idl)
查看>>