CSS样式基础2
CSS:
一、常用样式:字体,颜色,背景
二、布局:浮动 定位 标签特性
三、标签盒子模型: 边距 边框
四、动画:旋转 渐变
注意:子标签会继承父标签的样式但不是所有的样式都会被继承。
1.1、文本字体
①文本颜色
h1 {color:#ccc;}
②文本对齐方式
h1 {text-align:center;}
h2 {text-align:right;}
h3 {text-align:justify;}
justify(每一行被展开为宽度相等,左,右外边距是对齐)
③文本修饰
h1 {text-decoration:none;}
none(无效果)
overline(上横线)
line-through(删除线)
underline(下划线)
④文本缩进
p {text-indent:50px;}
⑤字体样式
font-family
⑥字体形态
h1l {font-style:normal;}
h2 {font-style:italic;}
h3 {font-style:oblique;}
⑦字体大小
font-size
单位:em 1em的默认大小是16px
1.2、列表样式
①list-style-type指定列表项标记的类型
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
②list-style-image指定列表项标记的图像
ul
{
list-style-image: url('风景.jpg');
}
③list-style-position设置列表中列表项标志的位置
1.3、背景
①背景颜色:
body {background-color:#ccc;}
②背景图片:
div {background-image:url('大海.jpg');}
注意:
(路径html和js从html找 css从css找)
③背景图像水平或垂直平铺:
div
{
background-image:url('大海.jpg');
background-repeat:repeat-x;
}
repeat-x(x轴方向平铺)
repeat-y(y轴方向平铺)
no-repeat(不平铺)
④背景图像的位置:
用background-position改变图像在背景中的位置(right top)或(50% 50%)有空格
④简写
当使用简写属性时,属性值的顺序为::
background-color
background-image
background-repeat
background-attachment
background-position
实例:
{background:#ccc url('123.jpg') no-repeat right top;}
1.4、表格
①边框
table
{
border: 1px solid red;
}
②边框折叠
实例:
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid red;
}
③高度宽度
width;height
2.1布局
①元素居中对齐
div {
margin: auto;
width: 50%;
border: 1px solid red;
padding: 10px;
}
②文本居中对齐
div {
text-align: center;
border: 1px solid blue;
}
③图片居中对齐
img {
display: block;
margin: auto;
width: 50%;
}
④左右对齐(使用定位)
.right {
position: absolute;
left: 0px;
width: 100px;
border: 1px solid #CCC;
padding: 10px;
}
⑤垂直居中对齐
div {
line-height: 200px;
height: 200px;
border: 1px solid green;
text-align: center;
}
⑥浮动
float 给要浮动的元素加父标签 设定父标签的宽高(导航栏常用浮动+li)
⑦Position定位:
fixed relative absolute
fixed:相对于窗口来定位 不在乎是否嵌套 没有本身位置
absolute:相对于标签定位 body 在乎嵌套,
相对于最近的有position属性的父标签定位 最终标签是body 没有本身位置
relative:相对于自身定位 位置还有 常用在微调和父标签(对齐)
⑦标签特性
display:block(块标签) inline-block(行内快标签) inline(行标签) none(隐藏,位置不在)
style="visibility:hidden"(隐藏,位置还在)
⑧盒子模型
padding
border
margin
实例:
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式
附加:
border-radius(圆角)
box-sizing:border-box(边框自适应)
margin-top:当写在子标签时会做用在父标签。
CSS样式基础2的更多相关文章
- CSS样式基础知识
CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...
- HTML CSS样式基础
一.css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具. 2.怎么使用cs ...
- CSS样式基础:
CSS:外部文件导入 <link rel="stylesheet" type="text/css" href="./style.css&quo ...
- css样式基础详解
一.字体属性:(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 2.样式 {font-styl ...
- CSS样式基础总结
首行缩进:text-indent:2em 行高:line-height:1.5em 1.5倍行距 也可以设置像素文字修饰:text-decoration:underline下划线 line-throu ...
- css样式基础三
css的定位: 其中css中被分为块级元素与行内元素.如块级元素div.hx标签.p元素.行内元素span和strong W3school给出的一切皆为框的定义. 而且可以使用display属性,强行 ...
- Css样式基础
1.Css的语法 CSS的语法主要由两个部分组成,一个是选择器,一个是属性. 选择器又分为以下几种: 1.元素选择器:即Html标签去掉括号的就是元素 2.类选择器:所谓的类就是说class=“名称” ...
- CSS样式基础二
一.列表 主要分为有序列表ol,无序列表ul <ul> <li></li> ... </ul> <ol> <li></li ...
- Emmet快速编写CSS样式
基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin. 1.而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如: ...
随机推荐
- Eclipse中Debug时鼠标悬停不能查看变量值解决办法
问题描述:Eclipse在Debug模式下,当鼠标移动到某个变量上面时不自动显示该变量对应的值. 解决方法:在Eclipse中点击 Window->Preferences->Java-&g ...
- python冷知识(续)
python 冷知识 1.交互式中修改最大递归深度 大家都知道使用递归是有风险的,递归深度过深容易导致堆栈的溢出. 那到底,默认递归次数限制是多少呢? 可以使用sys这个库来查看 >>&g ...
- java语言进阶(六)_线程_同步
第一章 多线程 想要设计一个程序,边打游戏边听歌,怎么设计? 要解决上述问题,需要使用多进程或者多线程来解决. 1.1 并发与并行 并发:指两个或多个事件在同一个时间段内发生. 并行:指两个或多个事件 ...
- @Autowired 引发的一系列思考
关于Java注解 注解定义 标记注解 - 没有元素 @interface Marker { } 单元素注解 - 只有一个元素 @interface Single { String value() de ...
- CSS3 实现复杂的背景图案
灵活的背景定位 实现效果: 将背景图定位到距离容器底边 10px 且距离右边 20px 的位置. background-position 方案 代码: <div>海盗密码</div& ...
- git clone下载速度很慢的解决方法
一直用git clone从github上下载源码学习,但是有时候git clone速度好慢,只有几Kb的速度,按这个速度下载安卓源码的话估计要下一年. 然后我再网上找各种教程,试过通过vps下载git ...
- lottery+web2
lottery 题目分析 题目给了一个彩票网站,经过页面的探索,没有发现明显漏洞,进行目录扫描,发现该站存在.git文件 猜测存在源码泄露,使用githack利用: 获得网页源码,进行源码分析 源码审 ...
- python 读取指定文件夹中的指定文件类型的文件名
import numpy as np import os path = 'F:\\wenjian'#指定文件所在路径 filetype ='.csv'#指定文件类型 def get_filename( ...
- JVM 专题十五:执行引擎
1. 执行引擎概述 1.1 执行引擎 1.2 概述 执行引擎是Java虚拟机的核心组成部分之一. 虚拟机是一个相对于“物理机”的概念,这两种机器都有代码执行能力,其区别是物理机的执行引擎是直接建立在处 ...
- LINQ多表查询
#region Group,Join //只有join,没有into,内联(inner join) //var sql = from c in sdb.Classic // join s in sdb ...