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 ...
随机推荐
- Luogu P4097 [HEOI2013]Segment 李超线段树
题目链接 \(Click\) \(Here\) 李超线段树的模板.但是因为我实在太\(Naive\)了,想象不到实现方法. 看代码就能懂的东西,放在这里用于复习. #include <bits/ ...
- Luogu P2292 [HNOI2004]L语言
题目链接 \(Click\) \(Here\) 好久没写\(DP\)了真是水平下降不少,一眼把这个题搞成贪心了,然后一发交上只有\(37\)分\(QwQ\) 这个题好像还可以\(AC\)自动机胡搞?不 ...
- 绑定本地的Session
绑定本地的Session图示解析: 代码的结构: 代码: SaveServlet.java package com.itheima.servlet; import java.io.IOExceptio ...
- Mysql查询数据库 整理
一. 查询数据: 查询所有列:SELECT * FROM student; 查询指定列:SELECT id,NAME,gender FROM student; 格式:select字段名, ...
- 91 Testing MySQL学习总结
91 Testing MySQL学习总结 --------- 在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System什么是数据库?数据 ...
- npmrc npm配置文件
一.全局 这个文件在全局会放在/users/${yourname}/.npmrc 里面最重要的是registry,npm的源 二.项目 项目里面如果和package.json同级存放了这个.npmrc ...
- mysql在增加列前进行判断该列是否存在
通过存储过程判断字段是否存在,不存在则增加: DROP PROCEDURE IF EXISTS pro_AddColumn; CREATE PROCEDURE pro_AddColumn() BEGI ...
- log4j 基础教程【转】
参考引用自: http://javacrazyer.iteye.com/blog/1135493 我的git地址: https://git.oschina.net/KingBoBo/Log4JDemo ...
- golang channle 管道
管道的使用介绍 现在要计算 1-N 的各个数的阶乘,并且把各个数的阶乘放入到 map 中.最后显示出来.要求使用 goroutine 完成 package main import ( "fm ...
- Java8新特性_日期时间新类 LocalDate、LocalTime、LocalDateTime
import java.text.SimpleDateFormat; import java.time.LocalDate; import java.time.format.DateTimeForma ...