码迷,mamicode.com
首页 > Web开发 > 详细

CSS样式基础2

时间:2018-06-08 22:11:03      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:TE   lock   16px   隐藏   relative   顺序   图像   单位   渐变   

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‘);}

注意:

路径htmljshtmlcsscss

③背景图像水平或垂直平铺:

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

标签:TE   lock   16px   隐藏   relative   顺序   图像   单位   渐变   

原文地址:https://www.cnblogs.com/Ace-suiyuan008/p/9157439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!