zoukankan html css js c++ java

CSS简单介绍

一、方式

1.内联式引用

2.内部引用

3.外部引用(链接式引用，导入式引用)

4.优先级(由高到低) 内联式》外部链接式》内部式》外部导入式

二、内联式

1.直接从HTNL标签上注明格式

2。使用方法简单，不建议使用

3.维护成本高

三、内部引用

1.将样式声明在HTMl页面中

2.使用<style>和</style>标签进行声明

3.把CSS代码集中在同一个区域，不仅便于维护，页面结构也清晰了

4.内部定义的样式不能被其他页面所使用

5.内部引用只使用与对特殊页面设置独特风格。

四、外部链接式引用

1.使用频率最高，最实用

2.将CSS样式定义在一个独立的文件中，使用.css作为扩展名，使用HTML的Link对象来引用它。

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

将CSS与HTML分离，同一个CSS文件可以被不同的HTML所使用

3.便于维护

五、外部导入式引用

1.以import方式导入的样式表，在HTML初始化时，会被导入HTML页面中，作为文件的一部分。

2.链接式引用只有在HTML标签需要此样式时才被引入。

3.导入式最大用处就是可以在一个HTML中导入多个样式表。

<style type="text/css">

 @import url("./style/1.css”)

</style>

六、css注释与样式选择符

1.注释： /* */

2.样式选择符：标签选择符类选择符 ID选择符

优先级(由高到低)：ID选择符》类选择符》标签选择符

3.标签选择符

@CHARSET "UTF-8";

body{
    color:black /*页面文字为黑色*/
}
p {
    font-family:"sans serif" /*字体为sans serif"*/
}
p {
    texe-align:center;color:red  /*文字居中，文字红色*/
}

4.类选择符

/*类选择符*/
p.right {
    texe-align:right /*段落向右对齐*/
}
p.center {
    texe-align:center /*段落居中*/
}
/*
<body>
    <p class = "right">段落向右对齐</p>
    <p class = "center">段落居中</p>
</body>
*/
/*另外一种表达方式*/
.center {
    texe-align:center /*段落居中*/
}
/*

    <h1 class = "center">标题居中</h1>
    <p class = "center">段落居中</p>

*/

5.ID选择符

/*ID选择符*/
#center {
    texe-align:center /*段落居中*/
}
/*
<body>
    <p id = "center">段落居中</p>
</body>
*/

6.选择符的嵌套

/*选择符的镶嵌*/
#main li{
    color:red  /*文字红色*/
}
/*
<body>
    <div id="main">
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>
</body>
*/

7.样式表的层叠性

1.层叠性就是继承性

2.样式表的继承规则是：外部元素的样式会被该元素所包含的其他元素所继承

3.所有在元素中镶嵌的元素都会继承外层元素指定的属性值

<html>
  <head>
    <title>样式表的层叠性--继承</title>
    <style type="text/css">
    <!--
    div{
        font-size: 36px;
        text-decoration: underline;
    }
    p{
        line-height: 80px;
    }
    -->
    </style>
  </head>
  
  <body>
    <div id="main">
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>
    
  </body>
</html>

八、CSS盒子模型

1.组成：内容、边框border、填充padding、边界margin等四部分组成。

CSS 字体属性（Font）

属性	描述	CSS
font	在一个声明中设置所有字体属性。	1
font-family	规定文本的字体系列。	1
font-size	规定文本的字体尺寸。	1
font-size-adjust	为元素规定 aspect 值。	2
font-stretch	收缩或拉伸当前的字体系列。	2
font-style	规定文本的字体样式。	1
font-variant	规定是否以小型大写字母的字体显示文本。	1
font-weight	规定字体的粗细。	1

font-weight：字体粗细

属性值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100、200…900	400 等同于 normal，而 700 等同于 bold。

font-size：字体大小

属性值	描述
xx-small、x-small、small、medium、large、x-large、xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。

font-family：字体

font-style：斜体

属性值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。

CSS 背景属性（Background）

属性	描述	CSS
background	在一个声明中设置所有的背景属性。	1
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-color	设置元素的背景颜色。	1
background-image	设置元素的背景图像。	1
background-position	设置背景图像的开始位置。	1
background-repeat	设置是否及如何重复背景图像。	1
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

CSS 文本属性（Text）

属性	描述	CSS
color	设置文本的颜色。	1
direction	规定文本的方向 / 书写方向。	2
letter-spacing	设置字符间距。	1
line-height	设置行高。	1
text-align	规定文本的水平对齐方式。	1
text-decoration	规定添加到文本的装饰效果。	1
text-indent	规定文本块首行的缩进。	1
text-shadow	规定添加到文本的阴影效果。	2
text-transform	控制文本的大小写。	1
unicode-bidi	设置文本方向。	2
white-space	规定如何处理元素中的空白。	1
word-spacing	设置单词间距。	1
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

CSS 外边距属性（Margin）

属性	描述	CSS
margin	在一个声明中设置所有外边距属性。	1
margin-bottom	设置元素的下外边距。	1
margin-left	设置元素的左外边距。	1
margin-right	设置元素的右外边距。	1
margin-top	设置元素的上外边距。	1

CSS 内边距属性（Padding）

属性	描述	CSS
padding	在一个声明中设置所有内边距属性。	1
padding-bottom	设置元素的下内边距。	1
padding-left	设置元素的左内边距。	1
padding-right	设置元素的右内边距。	1
padding-top	设置元素的上内边距。	1

CSS 边框属性（Border 和 Outline）

属性	描述	CSS
border	在一个声明中设置所有的边框属性。	1
border-bottom	在一个声明中设置所有的下边框属性。	1
border-bottom-color	设置下边框的颜色。	2
border-bottom-style	设置下边框的样式。	2
border-bottom-width	设置下边框的宽度。	1
border-color	设置四条边框的颜色。	1
border-left	在一个声明中设置所有的左边框属性。	1
border-left-color	设置左边框的颜色。	2
border-left-style	设置左边框的样式。	2
border-left-width	设置左边框的宽度。	1
border-right	在一个声明中设置所有的右边框属性。	1
border-right-color	设置右边框的颜色。	2
border-right-style	设置右边框的样式。	2
border-right-width	设置右边框的宽度。	1
border-style	设置四条边框的样式。	1
border-top	在一个声明中设置所有的上边框属性。	1
border-top-color	设置上边框的颜色。	2
border-top-style	设置上边框的样式。	2
border-top-width	设置上边框的宽度。	1
border-width	设置四条边框的宽度。	1
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。	2
border-bottom-left-radius	定义边框左下角的形状。	3
border-bottom-right-radius	定义边框右下角的形状。	3
border-image	简写属性，设置所有 border-image-* 属性。	3
border-image-outset	规定边框图像区域超出边框的量。	3
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。	3
border-image-slice	规定图像边框的向内偏移。	3
border-image-source	规定用作边框的图片。	3
border-image-width	规定图片边框的宽度。	3
border-radius	简写属性，设置所有四个 border-*-radius 属性。	3
border-top-left-radius	定义边框左上角的形状。	3
border-top-right-radius	定义边框右下角的形状。	3
box-decoration-break		3
box-shadow	向方框添加一个或多个阴影。	3

CSS 列表属性（List）

属性	描述	CSS
list-style	在一个声明中设置所有的列表属性。	1
list-style-image	将图象设置为列表项标记。	1
list-style-position	设置列表项标记的放置位置。	1
list-style-type	设置列表项标记的类型。	1
marker-offset		2

九、使用css控制超链接

1.css提供了对超链接进行控制的能力，包括了超链接不同状态、伪类、按钮特效等等。

2.css允许针对超链接的未访问、已访问、活动、图标悬停等状态分别定义了不同的样式。这样便于可为网站添加奇妙而实用的效果。可以通过伪类(pseudo-class)来实现这些效果。

3.伪类是针对HTML元素的条件和事件所定义的CSS样式。

十、css伪类

/*从未访问过的链接样式*/
a:LINK {
    color: #6699CC;
}
/*已访问的链接样式*/
a:VISITED {
    color: #660099;
}
/*活动的链接*/
a:ACTIVE {
    background-color: #FFFF00;
}
/*有鼠标悬停的链接样式*/
a:HOVER {
    color: orange;
    font-style: italic;
}

十一、按钮超链接

<!DOCTYPE html>
<html>
  <head>
    <title>button.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
    <!--
    a{
        font-family: Arial;
        font-size:1em;
        text-align: center;
        margin:3px; 
    }
    a:LANG,a:VISITED{
        color: #002020;
        padding: 4px 10px 4px 10px;
        background-color: #00d8db;
        text-decoration: none;
        border-top: 1px solid #EE00EE;/*边框实现阴影效果*/
        border-left: 1px solid #EE00EE;
        border-bottom: 1px solid #710071;
        border-right: 1px solid #710071;
    
    }
    a:HOVER{
        color:#ffffff;
        padding: 5px 8px 4px 12px;
        background-color: #00c4c9;
        text-decoration: none;
        border-top: 1px solid #710071;/*边框实现阴影效果*/
        border-left: 1px solid #710071;
        border-bottom: 1px solid #EE00EE;
        border-right: 1px solid #EE00EE;
    }
    -->
    </style>
  </head>
  
  <body>
    <a href="#">首页</a>
    <a href="#">列出所有联赛</a>
    <a href="#">添加新联赛</a>
    <a href="#">注册联赛</a>
    <a href="#">用户登入</a>
  </body>
</html>

十二、css/div页面布局

1.div标签是实现页面布局的重要标签，是英文Division的缩写，即分区、分块的意思，是一个大容器。

2.span是另外一个常用语布局的标签，span在一行内定义一个区域，也就是一行内可以被多个span划分成好几个区域，是一个小容器。

3.大容器中可以放置小容器。

4.css与div

<!DOCTYPE html>
<html>
  <head>
    <title>css与div</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        #left{
            background-color: #CCC0CC;
            float: left;
            height: 300px;
            width: 200px;
            border: 9px soid #333333;
        }
            #right{
            background-color: #CCCCCC;
            float: left;
            height: 300px;
            width: 200px;
            border: 2px soid #333333;
        }
    </style>
  </head>
  
  <body>
    <div id="left">左侧区域</div>
    <div id="right">右侧区域</div>
  </body>
</html>

5.布局居中显示

<!DOCTYPE html>
<html>
  <head>
    <title>css与div</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        #main{
            width: 408px;
            margin-top: 120px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0px;
        }
        #left{
            background-color: #CCC0CC;
            float: left;
            height: 300px;
            width: 200px;
            border: 9px soid #333333;
        }
            #right{
            background-color: #CCCCCC;
            float: left;
            height: 300px;
            width: 200px;
            border: 2px soid #333333;
        }
    </style>
  </head>
  
  <body>
      <div id = "main">
        <div id="left">左侧区域</div>
        <div id="right">右侧区域</div>
    </div>
  </body>
</html>

查看全文

相关阅读:
Delphi XE4 FireMonkey 开发 IOS APP 发布到 AppStore 最后一步.
Native iOS Control Delphi XE4
Delphi XE4 iAD Framework 支持.
using IOS API with Delphi XE4
GoF23种设计模式之行为型模式之命令模式
 Android青翼蝠王之ContentProvider
Android白眉鹰王之BroadcastReceiver
Android倚天剑之Notification之亮剑IOS
Android紫衫龙王之Activity
GoF23种设计模式之行为型模式之访问者模式

原文地址：https://www.cnblogs.com/zdf159/p/7256838.html