css 学习笔记 菜鸟
1 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。CSS声明总是以分号(;)结束,声明总以大括号({})括起来:
2 CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下: /*这是另一个注释*/
3 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。CSS 中 id 选择器以 "#" 来定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
4 class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。在 CSS 中,类选择器以一个点"."号显示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center
{
text-align:center;
}
</style>
</head> <body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
5 可以指定特定的HTML元素使用class。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p.center
{
text-align:center;
}
</style>
</head> <body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>
6 每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
可以使用 <style> 标签在文档头部定义内部样式表
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
7 多重样式优先级:内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
8 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。如果图像只在水平方向平铺 (repeat-x),垂直方向平铺是 (repeat-y),不平铺是 no-repeat
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
9 text-decoration 属性用来设置或删除文本的装饰。
10 font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。
11 设置文字的大小与像素h1 {font-size:40px;} 1em和当前字体大小相等 h1 {font-size:2.5em;}
12
当设置为若干链路状态的样式,也有一些顺序规则:
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
13
14 分组选择器
h1,h2,p
{
color:green;
}
嵌套:
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
15 使用百分比设置高度
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
html {height:%;}
body {height:%;}
img.normal {height:auto;}
img.big {height:%;}
img.small {height:%;}
</style>
</head> <body>
<img class="normal" src="logocss.gif" width="" height="" /><br>
<img class="big" src="logocss.gif" width="" height="" /><br>
<img class="small" src="logocss.gif" width="" height="" />
</body>
</html>
16 隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间
17 块级元素(block)特性:
- 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
利用CSS可以改变元素的类型,自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个:
- display:block -- 显示为块级元素
- display:inline -- 显示为内联元素
- display:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。
18 position 属性指定了元素的定位类型。
position 属性的五个值:
19 CSS overflow 属性用于控制内容溢出元素框时显示的方式。可以控制内容溢出元素框时在对应的元素区间内添加滚动条
20 水平居中块级元素 (如 div), 可以使用 margin: auto;
.center {
margin: auto;
width: %; 注意: 如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用。
border: 3px solid green;
padding: 10px;
}
如果仅仅是为了文本在元素内居中对齐,可以使用 text-align: center;
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
21
css 学习笔记 菜鸟的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
随机推荐
- mysql 库、表、数据的增删改
数据库定义 语法形式 (1)创建数据库 create database [if not exists ] 数据库名 [charset 字符集] [collate 字符排序规则]; if not exi ...
- 洛谷 题解 P1550 【[USACO08OCT]打井Watering Hole】
本题看似很难,实际上思路非常简单--如果你想通了. 首先有一个问题:图中有几个点?大部分的人会回答\(n\)个点.错了,有\(n+1\)个. 多出来的那个点在哪?关键在于你要理解每一个决策的意义.实际 ...
- qt model--view-delegate模式的界面设计概念,ListView用法
最经典的界面设计模式,必须知道. 作为 一种经典到 不能 再 经典 的 架构 模式, qt的model--view-delegate大 行其 道 有其 必然 的 道理. 通过 把 职责. 性质相近的 ...
- django 相关配置(pycharm)
第二步
- fastjson<1.2.47 RCE 漏洞复现
这两天爆出了 fastjson 的老洞,复现简单记录一下. 首先使用 spark 搭建一个简易的利用 fastjson 解析 json 的 http server. package cn.hackte ...
- ubuntu修改密码
ubuntu修改密码 本文链接:https://blog.csdn.net/heybob/article/details/9095727 修改root密码: 1,$sudo su,输入密码进入root ...
- html页面在苹果手机内,safari浏览器,微信中滑动不流畅问题解决方案
1. -webkit-overflow-scrolling:touch是什么? MDN上是这样定义的: -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效 ...
- Notepad++连接VMWare中Linux只能看到/root目录
如下图,使用SFTP协议连接,用root用户登录后,我一开始只能看到root下的文件.稍作修改,把下面的“Initial remote directory”设置成“/”就可以看到根目录了.
- git版本控制系统重新认识
git 版本控制系统 目标:完全搞懂git分布式版本控制系统 搭建git版本控制系统 cvs集中化版本控制系统--集中式管理的服务器 git分布式版本控制系统--会将原始代码仓库镜像下来 新项目使用g ...
- Spring全框架讲解
Day 01: https://blog.csdn.net/sinat_29211659/article/details/81335229