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    可选。阴影的颜色






Css字体
CSS字体属性定义字体，加粗，大小，文字样式。
自定义字体：

@font-face {
font-family: "AncientWar";
src: url('style/css/fonts/AncientWar.ttf');
}

font-family属性是多种字体的名称，作为一个"应变"制度，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体，它尝试下一个的字体。

p{font-family:"Times New Roman", Times, serif}   https://www.runoob.com/cssref/css-websafe-fonts.html

字体样式

p.normal {font-style:normal;}  正常 
p.italic {font-style:italic;}斜体 
p.oblique {font-style:oblique;} 倾斜的文字

字体粗细：

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}   定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

字体大小：
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。


例子：

font-family:Verdana,KaiTi;
            font-style: italic;
            font-size:40px;
            font-weight: bold;
            100%;
            height:100px;
            background: red;
            text-align: right;

效果

 链接：

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

• a:hover 必须跟在 a:link 和 a:visited后面
• a:active 必须跟在 a:hover后面

例子：

        /*连接正常样式*/
        .link:link{
            display: inline-block;
            padding:1px 5px;
            border:1px solid #eeeeee;
        }
        /*访问后的样式*/
        .link:visited{
            border:1px solid red;
        }
        /*鼠标移动在上面的样式*/
        .link:hover{
            color:red;
        }
        /*点击那一刻的样式*/
        .link:active{
            background: pink
        }

文本修饰：

text-decoration 属性主要用于删除链接中的下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}删除下划线
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;} 添加下划线

列表：

无序列表、有序列表

list-style-type属性指定列表项标记的类型是：
ul.a {list-style-type:circle;} 圆形
ul.b {list-style-type:square;}方形
ol.c {list-style-type:upper-roman;}罗马数字
ol.d {list-style-type:lower-alpha;}小写字母
要指定列表项标记的图像，使用列表样式图像属性：
list-style-image: url('sqpurple.gif');
简写属性：
list-style: square url("sqpurple.gif");

例子：

li{
            list-style-type:square;
            list-style-position: center;
            list-style-image: url('../btn2.jpg');
        }

表单：

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

table, th, td
{
    border: 1px solid black;
}

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

border-collapse:collapse;

table { border-collapse:collapse; }

Width和height属性定义表格的宽度和高度。

text-align属性设置水平对齐方式，向左，右，或中心：td

垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

td
{
    height:50px;
    vertical-align:bottom;
}

例子：

    table{
            border-collapse: collapse;
            width:600px;
            border:1px solid #98bf21;
        }
        th{
            padding:5px 5px;
            background-color:#A7C942;
        }
        td,th{
            
            border:1px solid #98bf21;
            
            text-align: center;
        }
        td{
            background-color:#EAF2D3;
        }

设置表格标题位置

caption {caption-side:bottom;} top