CSS

最新推荐文章于 2022-05-14 16:15:00 发布

Azury0910

最新推荐文章于 2022-05-14 16:15:00 发布

阅读量132

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/azury0910/article/details/105446980

版权

CSS简介

层叠样式表Cascading Style Sheets
可以解决内容与表现分离的问题

基本语法：

选择器+一条或多条声明

	selector1, selector2, … ,selectorN
	/*多重选择器用 , 隔开
	被分组的选择器就可以分享相同的声明*/
{
	declaration1; 
	declaration2; /*多重声明用 ; 隔开*/
		... 
	declarationN;/*增强代码的可读性*/
}

声明（declaration） = 一个属性(property) + 一个值(value)
selector{property: value}

如果值为若干单词，则要给值加引号

颜色的不同种写法

十六进制的颜色值#ff0000
有对应的英文名
Black
Silver
Gray
White
Maroon
Red
Purple
Fuchsia
Green
Lime
Olive
Navy
Blue
Teal
Aqua
CSS的缩写形式#f00
GRB值
rgb(255,0,0)
rgb(100%,0%,0%)
当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号
当尺寸为 0 像素时，0 之后不需要使用 px 单位

派生选择器
id选择器
类选择器
属性选择器

如何插入样式表

外部样式表

<head>
<link rel="stylesheet"  href="filename.css" />
</head>

内部样式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

当单个文档需要特殊的样式时，就应该使用内部样式表。

内联样式

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。

样式优先权（覆盖）：

浏览器缺省设置
外部样式表（通常存储在CSS文件里）
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

CSS样式

背景

背景颜色 background-color

 p {background-color: gray; padding: 20px;}
 /*内边距 向外少有延伸*/

默认值为transparant

背景图像 background-image

body {background-image: url(/i/eg_bg_04.gif);}

默认值是 none
需要为这个属性设置一个 URL 值

背景重复 background-repeat

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

repeat-x水平方向
repeat-y垂直方向
no-repeat不允许平铺

背景定位 background-position
改变图像在背景中的位置

1.关键字

top、bottom、left、right 和 center

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

保证不超过两个关键字
一个对应水平方向，另一个对应垂直方向
如果只出现一个关键字，则默认另一个关键字是 center

2.百分数值

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

0% 0% = 左上角 top left （默认值）
100% 100% = 右下角

3.长度值
如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上

背景关联 background-attachment
默认值是 scroll 背景会随文档滚动

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

背景合并声明
简写属性将所有背景属性设置在一个声明之中

body
	{
	background: #ff0000 no-repeat fixed center;
	}

CSS 定位(Positioning)

块级元素
行内元素
position 属性值的含义：

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

文本

Azury0910

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS简介层叠样式表Cascading Style Sheets可以解决内容与表现分离的问题基本语法：选择器+一条或多条声明 selector1, selector2, … ,selectorN /*多重选择器用 , 隔开被分组的选择器就可以分享相同的声明*/{ declaration1; declaration2; /*多重声明用 ; 隔开*/ ... decla...
复制链接

扫一扫