css基础

 

 

添加样式发噶发：

• 外部样式表(External style sheet)
• 内部样式表(Internal style sheet)
• 内联样式(Inline style)

<link rel="stylesheet" type="text/css" href="mystyle.css">

 

多重样式：

外部样式

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

内部样式：

h3
{
    text-align:right;
    font-size:20pt;
}

最后的实际样式

color:red;
text-align:right;
font-size:20pt;

优先级：

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

 

优先级顺序

下列是一份优先级逐级增加的选择器列表：

• 通用选择器（*）
• 元素(类型)选择器
• 类选择器
• 属性选择器
• 伪类
• ID 选择器
• 内联样式

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

 

把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式"，那么"直接样式"就是一个标签直接拥有的属性

 

• link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；

• @import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；

• 当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

 

CSS 属性定义背景效果:

• background-color
•    
  • 十六进制 - 如："#ff0000"
  • RGB - 如："rgb(255,0,0)"
  • 颜色名称 - 如："red"
• background-image   
•       background-image:url('paper.gif'); 默认情况下，背景图像进行平铺重复显示
• background-repeat

• background-image:url('gradient2.png');
  background-repeat:repeat-x;no-repeat

   

• background-attachment

• background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。  scroll  fixed   inherit
  

  　　

• background-position
•    

  利用 background-position 属性改变图像在背景中的位置:
  background-position:right top;
  

  　　

简写：

background:#ffffff url('img_tree.png') no-repeat right top;

background-position:-30px -50px;该怎么理解？

使背景图片向左移动30像素, 向上移动50像素.background-position: x y;x向右为正, y向下为正

 

选择器的权值不能进位。

 

文字属性：

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}

 

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文字缩进

p {text-indent:50px;}

文字间隙：

h1 {letter-spacing:2px;}

行高：

p.small {line-height:70%;}

一行文本的行高为：上间距 + 文本的高度+下间距，并且上间距是等于下间距的

 

行内框盒子模型

https://www.cnblogs.com/zhangyachen/p/8035661.html

• 内容区域 content area

• 围绕盒子看不见的区域，大小与font-size相关，高度就是上面图示中的文本高度。我们可以理解成选中文字之后的变色区域。内容区域高度 = 字体大小
  

  　　

• 内联盒子 inline boxes
• 行框盒子 line boxes

• 包含盒子 containing box

 

div.ex1 {direction:rtl;}

 

单词之间间隙：

word-spacing:30px;

禁止文字环绕 
white-space:nowrap;

 

文字对齐方式

img.bottom {vertical-align:text-bottom;}

 

 

文字阴影

h1 {text-shadow:2px 2px #FF0000;}

 

text-shadow: h-shadow v-shadow blur color;h-shadow    必需。水平阴影的位置。允许负值。v-shadow   必需。垂直阴影的位置。允许负值。blur     可选。模糊的距离。color    可选。阴影的颜色

来源：https://www.cnblogs.com/webcyh/p/11330305.html