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

css

时间:2020-06-22 12:46:08      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:背景图像   释放   :link   url   设置字体   设置字体大小   class   type   strong   

ID选择器和类选择器的区别

id选择器只能网页中的一个元素使用

 

id》类》标签

 

高级

层次选择器

结构伪类选择器

属性选择器

 

<span>标签

作用:能让某几个文字或者某个词语凸显出来

字体样式:

属性名含义举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";

风格>粗细>大小>类型

文本属性:

属性含义举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:2em;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
vertical-align 垂直对齐方式 middle。top。bottom
     

文本阴影

属 性 名IEFirefoxChromeOperaSafari
Text-shadow 9+ 3.5+ 2.0+ 9.6+ 4.0+

语法:

text-shadow :color x-offset y-offset blur-radius;

 

超链接伪类

伪类名称含义示例
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}

设置伪类的顺序:a:link->a:visited->a:hover->a:active

列表样式

说明语法示例
none 无标记符号 list-style-type:none;
disc 实心圆,默认类型 list-style-type:disc;
circle 空心圆 list-style-type:circle;
square 实心正方形 list-style-type:square;
decimal 数字 list-style-type:decimal

网页背景

背景颜色

background-color

背景图像

background-image

背景重复方式

background-repeat属性

repeat:沿水平和垂直两个方向平铺

no-repeat:不平铺,即只显示一次

repeat-x:只沿水平方向平铺

repeat-y:只沿垂直方向平铺

背景定位

background-position属性

含义
Xpos Ypos 单位:px, Xpos表示水平位置,Ypos表示垂直位置
X% Y% 使用百分比表示背景的位置
X、Y方向关键词 水平方向的关键词: left、center、right 垂直方向的关键词: top、center、bottom

背景属性

background属性

.title {

font-size:18px;

font-weight:bold;

color:#FFF;

text-indent:1em;

line-height:35px;

background:#C00 url(../image/arrow-down.gif)205px 10px no-repeat;

/* 背景颜色 背景图片 背景定位 背景平铺方式*/

}

背景尺寸background-size

属性值描述
auto 默认值,使用背景图片保持原样
percentage 当使用百分值时,不是相对于背景的尺寸大小来计算的,而是相对于元素宽度来计算的
cover 整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适应所定义背景的区域

css渐变

线性渐变

颜色沿着一条直线过渡:从左到右、从右到左、从上到下等

径向渐变

圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合

属 性 名IEFirefoxChromeOperaSafari
Gradient 10+ 19.0+ 26.0+ 12.1+ 5.1+

IE浏览器是Trident内核,加前缀:-ms-

Chrome浏览器是Webkit内核,加前缀:-webkit-

Safari浏览器是Webkit内核,加前缀:-webkit-

Opera浏览器是Blink内核,加前缀:-o-

Firefox浏览器是Mozilla内核,加前缀:-moz-

标准文档流

标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式

标准文档流组成

块级元素(block)

<h1><h6><p><div>、列表

内联元素(inline)

<span><a><img/><strong>...

内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立

css

标签:背景图像   释放   :link   url   设置字体   设置字体大小   class   type   strong   

原文地址:https://www.cnblogs.com/joenx/p/13176028.html

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