你的位置:首页 > 网页设计

[网页设计]css基础内容

CSS 教程

CSS 基础教程CSS 教程 CSS 简介 CSS 基础语法 CSS 高级语法 CSS 派生选择器 ...CSS 参考手册 CSS 实例 CSS 测验W3School 简体中文版提供的内容仅用于...

CSS 基础语法

CSS 基础语法CSS 简介 CSS 高级语法 CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 selector {declaration1; declaration2;...

CSS 基本知识 - 彼岸时光 - 博客园

CSS 基本知识 1、CSS 简介CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做...

CSS基础知识(一) - l4的博客 - CSDN博客

CSS是指层叠样式表 HTML描述了要呈现的内容,而CSS则定义了这些内容的呈现形式,比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离,有利于分...

html和css基础知识 - 诸葛文斌 - 博客园

Html和CSS的关系学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:1. HTML是网页内容的...

HTML+CSS基础教程-慕课网

通过学习HTML+CSS基础教程,轻松学习HTML、CSS样式基础知识,可以利用HTML、CSS样式技术制作出简单页面,没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户...

CSS 教程 | 菜鸟教程

CSS 教程 通过使用 CSS 我们可以大大提升网页开发的工作效率! 在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。 各章节实例...

CSS 基础篇、绝对有你想要 - suoning - 博客园

CSS 基础篇、绝对有你想要 本章内容:简介 CSS 定义 四种引入方式 样式应用的顺序 选择器(Selector) * 通用元素选择器 标签选择器 class 类选择器 # ID选择器...

[京程一灯web前端开发]1-10 CSS基础知识-教育-高清正版视..._...

[]时长nbsp;14:00

[京程一灯web前端开发]1-10 CSS基础知识是教育类高清视频,于2016-12-17上映,视频画面清晰,播放流畅,内容质量高。视频主要内容:[京程一灯]Web前端零基础入门教程...

.iqiyi./w_19ru86nq...nbsp;nbsp;-nbsp;百度快照

DIV CSS基础教程 - DIV+CSS学习教程与资源分享平台

本栏目主要是div+css网站给大家总结的css学习入门知识教程,从零到入门再到独立css开发运用者必备div css基础知识教程

CSS基础知识 - 简书

一、css基础知识 css层叠样式表引入的分类和位置 (1)内部样式:在head区域的style标签里面(2)外部样式:在link中引入(3)内联样式:标签元素里面 表示颜色...

css基础内容 - sfencs - 博客园

css基础内容CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容...

【HTML】CSS基础知识 - CSDN博客

css基本结构 css的四种引入方式 1、行内式:是在标记的style属性中设定css样式。这种方式没有体现出css的优势,不推荐使用 hello yuan 2、嵌入式:嵌入式...

HTML+CSS基础知识点_百度文库

nbsp;评分:5/5nbsp;11页

HTML+CSS基础知识点 - 适用于初学者,都是最基础的知识点... HTML+CSS 笔记 1.学习 web 前端开发基础技术需要掌握:HTML、CSS、JavaScript 语言。(1)HTM...

html+css基础内容 - Shmily___的博客 - CSDN博客

html基础内容 空格编码 amp;amp;nbsp;=空格; 打印标签 amp;amp;ltdivamp;amp;gt=amp;lt;divamp;gt; (lt是less than的缩写 gt是great than 的缩写...

Html5+CSS3基础知识汇总-CSS3篇 - CSDN博客

1.1 CSS的基本概念CSS指层叠样式表(Cascading Style Sheets) 为什么需要用CSS HTML描述了要呈现的内容,而css则定义了这些内容的呈现形式,比如字体、颜...

HTML5学习笔记lt;八gt;: 1. CSS3基础之入门基础知识 - 南心芭..._博客园

lt;!DOCTYPE htmlgt; CSS 应用了样式表 mycss.cssh1 { color: red; font-size: 50px; } 3. CSS高级语法1. 选择器分组:h1, ...

CSS核心基础之CSS基础知识介绍-百家号

3. CSS层叠样式的基本语法 一个样式(Style)的语法由三部分构成:选择器(Select...lt;标签名 style=“属性1:值1;属性2:值2;属性3:值3;……”gt;内容lt;/ 标签...

CSS基础知识(用例子来讲解)_图文_百度文库

CSS基础知识(用例子来讲解)_计算机软件及应用_IT/计算机_专业资料。css基础知识,从入门到精通 第四章 CSS基础知识 本章内容一、CSS 简介 二、在网页中...

html+css<\/font>免费教程_0基础<\/font>入门到精通-免费直播公开课

html+css<\/font>免费直播公开课含js,html,div,css<\/font>,javascript,jquery,html5+css<\/font>3等课程.结合2018全新企业面试要求及一线企业内部项目/案例打造WEB前端全新教程,点击免费领取!2017广东街坊文化节时间?街坊文化节活动地点?中秋节去华南植物园有什么活动?广州华南植物园优惠活动介绍?深圳锦绣中华中秋节有什么活动?锦绣中华中秋节门票多少钱?教师节去广州塔门票优惠吗?广州电视塔凭教师证门票半价吗?2017广州塔教师节活动?广州电视塔教师门票半价优惠吗?广州塔中秋节有什么活动?中秋节去广州电视塔优惠活动?北京出发去法属圭亚那旅游 北京出发去法属圭亚那旅游 北京出发去法属圭亚那旅游 北京出发去法属圭亚那旅游 北京出发去法属圭亚那旅游 北京出发去法属圭亚那旅游 北京出发去梵蒂冈旅游 北京出发去梵蒂冈旅游 北京出发去梵蒂冈旅游 北京出发去梵蒂冈旅游 北京出发去梵蒂冈旅游 北京出发去梵蒂冈旅游 北京出发去非洲旅游 北京出发去非洲旅游 北京出发去非洲旅游 北京出发去非洲旅游 北京出发去非洲旅游 北京出发去非洲旅游 北京出发去菲律宾旅游 北京出发去菲律宾旅游 北京出发去菲律宾旅游 北京出发去菲律宾旅游 北京出发去菲律宾旅游 北京出发去菲律宾旅游

css基础内容

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

一.css的引入方式

1.直接在html标签元素内嵌入css样式
<div style="font-size:14px; color:#FF0000;">行内引入</div>
2.在html头部head部分内style声明插入代码
<style>  p{   background-color: #FF0000;  } </style>
3.使用@import引用外部CSS文件
<style type="text/css">   @import"css文件路径"; </style>

这种方式会先加载html文档,再引入css渲染,可能会出现先打开没有样式的显示之后才有了样式渲染。

<link href="css文件路径" rel="stylesheet" type="text/css"/>

二.css选择器

1.基础选择器
基本选择器说明
*匹配任何元素
E标签选择器,匹配所有使用E标签的元素
.class名class选择器,匹配所有class属性为此class名的元素
#id名id选择器,匹配所有id属性等于此id名的元素
2.组合选择器
组合选择器说明
E,F同时匹配所有E元素或F元素
E F后代选择器,匹配所有E标签下的F元素
E>F子选择器,匹配所有E下一级的F元素
E+F相邻兄弟选择器,匹配所有紧随E元素之后的同级元素F
E~F匹配E元素后面的所有兄弟元素中的F元素
3.属性选择器
属性选择器说明
E[att]选中具有attr属性的E元素
E[attr=val]选中具有attr属性,并且属性值为val的E元素
E[attr^=val]选中具有attr属性,并且属性值以val开始的E元素
E[attr$=val]选中具有attr属性,并且属性值以val结束的E元素
E[attr*=val]选中具有attr属性,并且属性值包含val的E元素
E[attr~=val]选中具有attr属性,并且属性值包含val的E元素,该属性值必须以空格隔开
4.伪类
锚伪类说明
a:link未访问的链接
a:visited已访问的链接
a:hover鼠标移动到链接上
a:active选定的链接

a:hover 必须被置于 a:link 和 a:visited
a:active 必须被置于 a:hover 之后

E:before 在元素之前插入内容
E:after 在元素之后插入内容
举例:

p:before{content:"sfencs";color:red}//在p标签之前插入sfencsp:after{ content:"sfencs";color:red}//在p标签之后插入sfencs

三.css属性

1.字体
//设置字体大小font-size: 20pxfont-size: 50%font-size: larger//设置字体颜色color:bluecolor:#FF0000color:rgb(255,0,0)color:rgba(255,0,0,0.5)//最后一项是透明度//设置字体样式font-family:Microsoft YaHei//设置字体粗细font-weight: lighter//bolder/lighterfont-weight: 500//100-900font-weight: bold//normal/bold//字体倾斜font-style: oblique
2.背景
background-color:blue//背景颜色background-image: url('图片路径')background-repeat: no-repeat//图像平铺模式:repeat垂直方向和水平方向重复/repeat-x水平方向重复/repeat-y垂直方向重复/no-repeat不重复
3.文本
text-align: center//文本对齐方式:left/center/rightline-height: 200px//行高vertical-align:middle//设置元素的垂直对齐方式:top把元素的顶端与行中最高元素的顶端对齐/bottom把元素的顶端与行中最低的元素的顶端对齐........text-indent: 150px//首行缩进letter-spacing: 10px//字符间隙word-spacing: 20px//单词间隙text-transform:uppercase//控制文本大小写:capitalize单词大写字母开头/uppercase全部大写/lowercase全部小写
4.边框
border-style: solid边框样式border-color: black边框颜色border-width: 20px边框宽度
5.列表
list-style-type:circle//设置列表项标记的类型list-style-position:inside//设置在何处放置列表项标记list-style-image: url('图像路径')//使用图像来替换列表项的标记
6.display
display:none//不显示display:block//显示为块级元素display:inline//显示为内联元素,元素前后没有换行符display:inline-block//行内块级元素
7.外边距和内边距

这里借用w3school的一张图

通过调整margin,padding来调整元素内容之间的举例,元素与元素之间的举例。
注意1:设置padding-left:10px;并不是将内边距设置为10px,而是在原来的基础上,增加10px,若想减小内边距,可以使用设置负值来完成。
注意2:body标签在html标签之中,所以body与html之间会有外边距,这就是浏览器网页两边会有白边的原因,可以通过改变body的margin来解决。
注意3:边界塌陷问题,父级div中没有 border,padding,inline content,子级div的margin会一直向上找,直到找到某个标签包括border,padding,inline content 中的其中一个,然后按此div 进行margin
    解决方法:1.给父div设置透明边框2.给父div设置padding3.给父div设置over-flow:hidden

8.float浮动

float使得元素脱离文档流,使得元素向左或向右浮动,直到遇到边框

float:right//是元素向右浮动float:left//使元素向左浮动

如果两个挨着的元素同时向右浮动,那么左边的元素也会紧随着右边的元素,而不会到达边框
如果一行内放不下多个浮动元素,那么多余的浮动元素会到达下一行。
如果不想一个元素的两边有浮动元素,可以使用clear属性,

clear:noneclear:leftclear:rightclear:both

浮动虽然有益处,但也会带来副作用,即由于浮动脱离了文档流,导致父级div不能够被撑开,导致浮动溢出
解决方法:1.设置父级div高度2.在父级div的末尾加上

<div ></div>

3.给最后一个浮动元素加上

:after { content: ".";    display: block;   clear: both;     visibility: hidden;   line-height: 0;    height: 0;     font-size:0;     }
9.position
positipn:static//默认值。没有定位,元素出现在正常的流中position:relative//生成相对定位的元素,相对于其正常位置进行定位,可以使用top,right,bottom,left等属性进行调整position:fixed//生成绝对定位的元素,相对于浏览器窗口进行定位position:absolute//生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,可以使用top,right,bottom,left等属性进行调整