css基本介绍

3、CSS基本介绍

1.1 CSS基本介绍一.web 标准所谓的web标准指的就是一系列规范网页书写的要求,它是由W3C组织制定,在它里面要求网页的结构.样式.行为三者相分离.二.名词解释1.结构:就是通过HTML标签搭建的网页的结构.2.样式:就是通过CSS对当前的网页结构进行修饰和美化3.行为:通过Js让网页可以理解用户的一些操作.从而用户与网页之间产生交互. 1.2 CSS基本使用一.定义Css在国内被称之为级联样式表.层叠样式表.样式表,它的作用就是修饰当前网页中的HTML元素.二.基本使用步骤1.CSS与…

常用前端布局，CSS技巧介绍

常用前端布局,CSS技巧介绍对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. 在这个地方可以使用padding来实现,首先,元素的高度=height+padding*2+border*2;所以我们可以将widht设置为0, 然后用padding来实现盒子的高度(若元素padding的值是一个百分比,则是基于其父元素的宽度来计算的) width: 50%; height: 0;…

CSS基础介绍

CSS介绍 CSS是指层叠样式表,CSS样式表极大的提高了工作效率 CSS基础语法 1. 首先选择一个属性 2. 选择了属性以后,用大括号括起来 3. 括号里面是对应的属性和属性值,如: selector { property: value; } 举一个实际的例子,就像这样: h1是属性,然后一个大括号,括号中的color是属性,后面跟着对应的属性值red,设置结束后需要用;来分别各个属性 h1 { color: red; font-size: 14px; } 使用CSS样式: 需要在html中…

二、CSS 基本介绍

[ 显示目录 ] [ 隐藏 ] 目录基本概念 CSS组成部分 CSS的规则引入CSS样式的方法颜色的表示 CSS Reset 选择器分类浮动盒子模型 box-sizing属性实例:实现“田字格”布局实例:实现metro风格布局实例:画三角形实例:画一棵树设置字体属性设置段落属性设置背景及背景图片的属性自定义列表标志 display常用属性 inline-block去除间距例子:垂直居中对齐 position属性案例:实现顶部导航案例:实现登录界面 IE 6 双倍m…

CSS入门介绍

一.背景这里将陆续介绍前端CSS中相关知识,先介绍CSS2.1,后续会介绍CSS3的相关属性,通过该系列的文章,希望能给准备转战前端的人员一些帮助,同时也帮助自己梳理知识,文章中如有错误,欢迎指出. 下面是CSS2.1第一个阶段的知识框图,后面会陆续更新该系列后续文章. 二.整体介绍 (一).基础介绍 1. 七个基本的入门属性首先要记住,颜色:color,背景颜色:background-color,字体大小:font-size,加粗:font-weight:bold,倾斜:font-style…

前端部分-CSS基础介绍

CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.也就是定义相应的标签语言来定制显示样式达到一定的显示效果. 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS的几种引用方式引用CSS样式的方式分为3种:1.便签行内定义显示方式 .2.内部定义,在html文件的<head></head>中定义<style></style>.3.以及把样式语句放在CSS文件…

CSS 的介绍

第一章的介绍 1.CSS:“层叠样式表”,它是cascading style sheets的缩写,作用就是给HTML标签加表现形式(样式-显示),如:字体,图片,列表,位置等. 在浏览器中可以看到部分: HTML:“超文本标记语言”,主要作用把内容(文字.图片.视频等)放入网页中--结构 CSS:“层叠样式表”,主要作用给HTML进行样式的显示,如何的布局--样式 Javascript:“浏览器的脚本语言”,主要作用给HTML加动态效果(特效)--行为 CSS特点: 可以非常精准的定位,定位某…

css样式介绍

1 css之选择器 1.1 基本选择器 1.2 组合选择器 E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔:div,p { color:#f00; } E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 :li a { font-weight:bold;} E > F 子元素选择器,匹配所有E元素的子元素F :div > p { color:#f00; } E + F 毗邻元素选择器,匹配所有紧随E元素之后的…

百万年薪python之路 -- 前端CSS基础介绍

一. CSS介绍 CSS定义 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color: green; backgroud-color: black; } 选择器{css样式:演示对应的值;} CSS的引用方式 #方式一:(内部样式表) head标签中写以下内容: <style> div{ color:green; background-color: black; } </style>…

Html/CSS 初步介绍html和css部分重要标签

&初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码先行总结重点下方给出具体 CSS: 1. position 对标签位置进行定位布局----共5属性(其中主要 fixed.relative.absolute)…

css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和"百分比单位". 绝对单位:px in cm mm 相对单位:em rem pt pc ex ch 百分比单位:vw vh vm % 下面主要说几个常用的单位 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体…

css sprites介绍

一.CSS Sprites简介通常被意译为“CSS图像拼合”或“CSS贴图定位”.CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度. CSS Sprites允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张…

CSS选择器介绍

一.元素选择器 E{...} 二.属性选择器 E[attr]{...}:指定该CSS对具有attr的元素起作用: E[attr=value]{...}::指定该CSS对具有attr的值为value的元素起作用: E[attr~=value]{...}:指定该CSS对具有attr属性,且属性值以逗号分隔,属性值中有value的元素起作用: E[attr|=value]{...}:指定该CSS对具有attr属性,且属性值以连字符分割,第一个属性值为value的元素起作用: E[attr^="valu…

Css基础-介绍及语法

css 文件后缀.css 基础语法: selector { property:value } 例如: h1 {color:red;font-size:14px;} color:字体颜色 font-size:字体大小 css 引入通过link: <link href="mycss.css" type="text/css" rel="stylesheet"> CSS高级语法: 1.选择器分组: 同时给多个属性添加样式 h1,h2 {co…

W3C 、HTML 、CSS 发展介绍

一.W3C W3C 指万维网联盟(World Wide Web Consortium),创建于1994年10月,由 Tim Berners-Lee (他是html的发明人)创建. W3C开始被创建的目的是,为了完成麻省理工学院(MIT)与欧洲粒子物理研究所(CERN)之间的协同工作,并得到了美国国防部高级研究计划局(DARPA)和欧洲委员会(European Commission)的支持. W3C后续的工作任务是对WEB技术的标准化,它是一个会员组织,各种WEB标准也是由会员讨论决定,3C 扮演…

阅读MDN文档之CSS选择器介绍(一)

本文为阅读MDN文档笔记目录 Different types of Selectors Attribute Selectors Presence and value attribute selectors Substring and value attribute selectors Pseudo-selectors Pseudo-classes Pseudo-elements Combinators Different types of Selectors Simple selectors:…

目录 CSS初识构造规则注意样式表的定义和使用行内式(内联样式) 内部样式表外部样式表(外链式) 选择器标签选择器(元素选择器) 类选择器 id选择器通配符选择器伪类选择器链接伪类选择器结构(位置)伪类选择器目标伪类选择器复合选择器交集选择器并集选择器后代选择器子元素选择器属性选择器伪元素选择器标签选择模式块级元素(block-level) 行内元素(inline-level) 行内块元素(inline-block) 标签显示模式转换display CSS…

CSS入门介绍（二）CSS选择器

css选择器什么是选择器? 选择器是你构造好网页的结构,需要给这些结构赋予样式,这时候就需要用到选择器,利用选择器将元素与样式一一对应:两者的对应关系可以是一对一,一对多,多对一. 选择器的分类: 这里我只展示几种比较常见的类型, 1. 标签选择器给同一种标签添加样式,例如: 标签名{ 属性名:属性值: } <style type="text/css"> p{ color: turquoise; } div{ width: 50px; height: 50px; bac…

CSS入门介绍（一）

css 层叠样式表(英文名:Cascading Style Sheets),主要用于美化网页 1.css的表现形式 1.1 行内样式(内嵌样式) 写在标签内的样式,写在标签的开始部分的内部,style属性当中,即<div style=" width="100px";height="100px" "></div> 1.2 内部样式(内联样式) 写在HTML页面中,存放于<head></head>标签当…

XPath语法和CSS选择器介绍

XPath语法 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历.XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointer 都构建于 XPath 表达之上. 节点关系 (1)父(Parent) 每个元素以及属性都有一个父. 在下面的例子中,book 元素是 title.author.year 以及 price 元素的父: <book> <title>Harry Potter</tit…

CSS简单介绍及应用

CSS的简介概述: Cascading Style Sheets, 层叠样式表. 作用: 用来美化页面的. 分类: 行内样式: //直接写在元素(html的标签)中的样式. 内部样式: //写在<head>标签的,<style>标签中. 外部样式: //写在后缀名为.css的文件中. CSS的引入方式之: 行内样式. 格式: <div style="属性名:属性值; 属性名:属性值"></div> 作用: 只针对于当前元素有效. CSS…

css简单介绍

css层叠样式表,主要作用就是解决内容与表现分离的问题.html标签有自己的意义当然也是有自己的默认样式的,但有时候我们想修改他的样式,这时候就需要了css. 例:给字体加上颜色,我们有如下几种方法: 1.<h1><font color="red" size="11px">123</font></h1> 2.在head里面加上style: <style type="text/css"> …

CSS设计模式介绍

一. 常见CSS设计模式分析 oocss Object Oriented CSS,面向对象的CSS,旨在编写高可复用.低耦合和高扩展的CSS代码. OOCSS是以面向对象的思想去定义样式,将抽象(结构)和实现(样式)分离,抽离公共代码. 区分结构和样式在定义一个可重用性的组件库时,我们仅创建基础的结构(html)和基础的类名,不应该创建类似于border, width, height, background等样式规则,这样使组件库更灵活和可扩展性.组件库在不同环境下的样式所要求不一样,若未能区…

css字体介绍

内容一切来自百度百科 1.Helvetica Helvetica是一种被广泛使用的的西文字体,于1957年由瑞士字体设计师爱德华德·霍夫曼(Eduard Hoffmann)和马克斯·米耶丁格(Max Miedinger)设计. Helvetica是由米耶丁格和爱德华德·霍夫曼在瑞士哈斯铸造所作为排版铅字制作的.当时人们熟悉的是“国际字体风格”(也称为“瑞士风格”),比如Josef Muller-Brockmann在1896年推广的Akzidenz Grotesk这类无衬线字体,而哈斯希望能设计一…

CSS参数介绍

原文发布时间为:2008-08-03 -- 来源于本人的百度文章 [由搬家工具导入] 行高 line-height: 16px 宽度 (具体位置)-width: 16px 文字缩行 text-indent: 2px 文字字体 font-family: "华文彩云" 文字颜色 font-color: #ffffff 文字大小 font-size: 21px 文字排列 font-aligh: left 左对齐 center 居中 right…

css颜色介绍和背景设置

现在美丽网页的设计图中颜色五花八门的,网页模块中漂亮背景图也很多,网页中颜色和背景设置必不可少,接下来我们就先学颜色是如何表达的,要知其然,知其所以然. 颜色表达形式 1.RGB:rgb( red, green, blue ):每个参数定义了0-255之间的颜色强度. 举例: rgb(255,0,0)//红色 rgb(0,0,0)//黑色 rgb(255,255,255)//白色 2.RGBA:rgba(red, green, blue, alpha):alpha是0-1透明度设置.0完全透明,…

【转】CSS Sprites教程大全（使用方法、工具介绍）

什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“background-image”属性来定位图片的X/Y轴位置,从而减轻服务器对图片的请求数量,提高网页加载速度.因为对于当前大多数网速而言,不高于200KB的单张图片所需载入时间基本是差不多的,如果页面上有20张小图片或图标,那么服务器会载入20次.但使用CSS Sprite将图片整合成一张大图后,服务器只需要载…