CSS入门学习

一。What?

CSS的全称是CascadingStyle Sheet,汉语意思是“级联样式表”。通常又称为“风格样式表(StyleSheet)”。它是用来进行网页风格设计的。

比如,在网页的设计中,在HTML页中仅仅增加网页内容,而将网页样式(比如,大到网页的布局结构。小到字体大小等)放在别处,实现了网页的内容和样式相分离,这样,在更改样式时。不影响内容。

能够说,CSS将网页中的内容和样式分离开,让它们各自变化,解除了耦合。

二。CSS的选择器

在CSS里面,有3种选择器,Class选择器。Id选择器。HTML选择器。

在这3种选择器中,我们都能够定义样式。可是,假设同一时候使用了多种样式,当中某些样式设置又是冲突的,这是该怎样解决呢?  有两个办法:

方法1:使用优先级:这3中选择器的优先级顺序为:id>class>HTML标签选择器;

方法2:对于同样优先级的,依照样式表排列的先后顺序确定,使用排列在样式表前面的;

这个使用规则在计算机的非常多地方都出现过。比如:使用运算符进行计算。出现中断怎样处理等等。

三。CSS核心内容简单介绍

1。标准流

简单理解就是页面中标签的排列方式:就像流水那样,排在前面的东西先出现,排在后面的后出现。

2,盒子模型

盒子模型在层次上感觉就像是俄罗斯套娃,一个套一个:

类比标准盒子模型:

看起来有点儿层次结构不好理解啊!!now。for example,我们在京东上买了个手机,这是我要包装的内容(content),然后在手机外面包上防震泡沫,这是padding,最后为了保险,还包上3cm厚的纸箱。这层是border. 为了防止不同盒子之间的碰撞。还要留出一个margin,ok,上面4层就形象啦~

3 ,float  &  position

依照标准流排列标签的方式感觉是先后顺序出来的,可是实际中,我们很多其它时候是要打破这样的单一的按顺序排列的方式,浮动和定位产生了丰富的页面排列方式。

时间: 2024-10-22 15:28:57

CSS入门学习的相关文章

【干货】Html与CSS入门学习笔记12-14【完】

十二.HTML5标记 现代HTML html5新增的元素:header nav footer aside section article time 这些新增元素使页面结构更清晰,取代<div id="header">这些. 还有,mark:突出显示文本.audio:插入音频.progress:显示进度条. htime元素:<time datetime="2017-07-28">7/28/2017</time>,datetime的值

【干货】Html与CSS入门学习笔记9-11

九.盒模型 与元素亲密接触 1.盒模型 css将每个元素都看做一个盒子,包括以下属性: 内容区content area:包含内容,内容可以决定大小,也可以自行设定宽度和高度.元素的width属性指定的就是内容区宽度,可以按像素指定也可以按百分比相对于元素所在容器如body div 的大小来指定. 内边距padding:内容区外的透明区域,可以看做元素的一部分,对元素设定背景会延伸到内边距. 边框border:内边距周围的边框. 外边距margin:边框外的透明区域,提供元素与元素之间的间隔,元素

CSS入门级学习

css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等 使用css样式的一个好处是通过定义某个样式,可以让不同的网页位置的字体有着统一的字体,字号或者颜色等 1.3:css代码语法 css样式由选择器和声明组成,而声明又由属性和值组成 h1 { color:red;font-size:14px;} 选择器 属性 值{属性和值构成声明}

第十二章 CSS入门

第 12 章 CSS 入门学习要点:1.使用 CSS2.三种方式3.层叠和继承 本章主要探讨 HTML5 中 CSS(层叠样式表),它是用来对 HTML 文档外观的表现形式进行排版和格式化. 一.使用 CSSCSS 样式由一条或多条以分号隔开的样式声明组成.每条声明的样式包含着一个 CSS属性和属性值.<p style="color:red;font-size:50px;">这是一段文本</p>解释:style 是行内样式属性.color 是颜色属性,red 是

js入门学习

在HTML,CSS学习的最后,开始入门学习javascript, 首先就是去了解它的用途 作用:使web页面能够与用户交互,作为控制浏览器给网页增添活力的方法 定义:它是一种脚本语言,作用于浏览器.和java没有半毛钱关系,主要是当时Netscape公司为了增加影响力改了名,,(是不是感觉很无耻) ps:区分程序的一种方式:1.客户端程序(client-side),像javascript就是,我觉得HTML,CSS应该也是. 2.服务器端程序(server-side),java,perl,php

Less入门学习总结

Less入门学习总结 一.什么是Less   css的Less好比是js的Jquery,可以让人们更方遍快捷的使用css,使css代码更简洁,可以减少重复的代码,减少开发人员的工作量. Less CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. Less中文手册:less.bootcss.com 二.编译工具 1.Koala:国人开发的LESS/SASS编译工具 下载地址:http:

微信小程序入门学习

前(che)言(dan): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋友呢,给我提供了大量的闲暇时光,对此我只想说:呵呵!.现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,这时候不学什么时候学?万一成为大牛了呢?万一有哪个妹子看上我了呢?想想还有点小激动呢... 正文: 1.什么是微信小程序? 简单的说很像 H5,它将 应用(功能与a

Web前端入门学习(2)——HTML常用标签

HTML标签 a标签 a标签是一个超链接标签,用于从一个页面链接到另一个页面.在<Web前端入门学习(1)>有提到过4个伪类,分别是a:link.a:visited.a:hover.a:active. a:link代表的是未访问过的链接,当访问者首次打开网页未点击链接时,所表现的形式: a:visited代表的是访问过的链接,相对于link,是访问者点击了连接后,所表现的形式: a:hover代表的是当鼠标经过链接上面时所表现的形式,鼠标经过后,链接会有所变化: a:active代表的是当用户

#2 CSS入门

CSS: cascading style sheets(层叠样式表) css2.0是现在我们教的版本(2013.11月教的) css3.0是最新的版本 推荐一个学习CSS的网站:禅意花园(PS:顶级优秀的网站) .dtd 文档类型定义:    这个是用来让一些低级版本的浏览器识别最新技术的命令. eg:  IE4.0版本的,如果识别最新的HTML的代码,有加上这个(HTML代码上面自动生成的这个东西) 浏览器就会自动到网站下载这个东西.然后就可以识别最新的命令 charset=UTF-8: