css3基础一
1，css简介
CSS 用于控制网页的样式和布局。样式定义如何显示html元素，样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
css模块主要是包括：
选择器，框模型，背景边框，文本效果，2d/3d转换，动画，多列布局，用户界面
css主要部分是选择器和声明以及声明对应的值：
2,id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。注意： ID属性不要以数字开头
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#para1 /*为所有id等于para1的元素设置css样式*/
{
text-align:center; /*排列居中*/
color:red; /*字体是红色*/
}
</style>
</head>
<body>
<p id="para1">Hello World!</p> /*这个元素会受影响，下一个不会*/
<p>这个段落不受该样式的影响。</p>
</body>
</html>
3，class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center /*为所有class等于center的元素设置格式*/
{
text-align:center;
}
</style>
</head> <body>
<h1 class="center">标题居中</h1> /*h1和p都会受到影响*/
<p class="center">段落居中。</p>
</body>
</html>
4，插入样式表
方法有三：外部样式表，内部样式表，内联样式。
外部样式表：
可以通过使用一个样式表来改变整个站点的外观，每个页面使用头部的<link>标签链接到样式表，大约相当于import。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
mystyle.css样式表的设置：
hr {color:sienna;} /*横线的意思，这个标签单个出现*/
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
自己尝试了一下，并没有成功，不知道问题在哪里，学学再回来看。
内部样式表：
把各种样式设置直接放在style里，放在<head>中就可以了，和放在css文件中是一样的
内联样式：
就是不采用内部样式或者外部样式表的环境设置，自己的元素中定义自己的样式，只能在自己的标签上起作用，有点像linux里的虚拟机，也很像class中继承父类但是可以修改某些默认的属性和方法。
多重样式表的优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
但是在具体操作中，内部样式和外部样式哪一个比较后被加载，浏览器就会应用哪个
5，background背景
- background-color 背景颜色、
- 十六进制 - 如："#ff0000"
- rgb(255,0,0) ,分别对应红绿蓝
- 颜色名称
- background-image
<style>
body
{
background-image:url('paper.gif'); /*优先显示背景图*/
background-color:#cccccc; /*没有背景图的时候显示背景颜色*/
}
</style>
- background-repeat：
- background-repeat:repeat-x;表示在水平方向平铺，竖直方向改成y，平铺的意思就是图不够大就复制几个彼此连接起来。
- background-repeat:no-repeat;不平铺，不平铺的时候一般会跟着background-position 属性
- background-attachment：background-attachment:fixed；图像固定，不会随着页面滚动。scoll会随着滚动。
- background-position：background-position:right top表示背景图居于右上。
背景可以简写：
像这样：body {background:#ffffff url('img_tree.png') no-repeat right top;}
简写的顺序：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
学到了这里http://www.runoob.com/css/css-background.html
css3基础一的更多相关文章
- css3基础教程：CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- css3基础教程十六变形与动画animation
前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...
- CSS3 基础知识
CSS3 基础知识1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0 ...
- CSS3 基础知识[转载minsong的博客]
CSS3 基础知识1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0 ...
- CSS3基础知识
CSS3基础 1 样式表的使用 1.内联样式表. 只影响单个元素,常用于标签. <p style="color: aqua;font-size: 20px">This ...
- CSS3基础入门03
CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...
- CSS3基础入门02
CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...
- h5、css3基础
一.html(超文本标记语言) 作用:实现页面布局 页面由许多标记符号组成 由浏览器解释执行 二.html主题创建方式 !(英文状态)+tab html:4s+tab html:5+tab 三.标签 ...
- CSS3基础入门01
CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
随机推荐
- Jquery Mobile列表
向 <ol> 或 <ul> 元素添加 data-role="listview" 1.圆角和外边距 :data-inset="true" ...
- Jqgrid pager 关于“local” dataType 动态加载数据分页的研究（没好用的研究结果）
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- 【强大美观易用的图像编辑器】Pixelmator Pro 1.2 for Mac
图标 Icon 软件介绍 Description Pixelmator Pro是一个功能强大.美观.易于使用的图像编辑器,专为Mac设计.Pixelmator Pro 借助各种专业级的无损图像编辑 ...
- mac上安装虚拟机
1.Mac | 怎么安装虚拟机 2.Mac | 怎么安装VMware Fusion虚拟机 资源下载链接: 1.win7旗舰版-64位.iso 2.VMFusion811.rar
- Spring Boot项目中的字体文件问题_Failed to decode downloaded font
1.问题:字体文件加载失败,本来应该是“X”号,现在只有一个小方块 2.原因:问题是Maven正在过滤字体文件并破坏它们. <resource> <filtering>true ...
- docker 基础之数据管理
数据卷 一.将本地默认目录挂载到docker容器内指定的目录 #将本地的目录挂在到docker容器内 docker run -it --name container-test -h CONTAINER ...
- Presto JVM.config
Presto 如果启动时候 指定 CMS,那么 launcher run 会提示 G1 回收算法是 推荐的垃圾回收算法,针对 Presto 大内存 回收,G1 暂时 应该是最稳妥的选择,调整之后大约如 ...
- SpringBoot笔记十二：缓存
目录 非缓存项目 缓存 JSR-107 Spring缓存抽象 @Cacheable @CachePut @CacheEvict @Caching @CacheConfig 整合Redis 先在Dock ...
- C++回顾day02---<拷贝构造函数：重点>
一:补充---无参构造函数(默认无参构造函数)在实例化对象时注意点 (一)若没有写构造函数,则类会含有一个默认无参构造函数 (二)若自定义一个构造函数,则类不会提供默认构造函数 class A { p ...
- 开源的，跨平台的.NET机器学习框架ML.NET
微软在Build 2018大会上推出的一款面向.NET开发人员的开源,跨平台机器学习框架ML.NET. ML.NET将允许.NET开发人员开发他们自己的模型,并将自定义ML集成到他们的应用程序中,而无 ...