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>

查看全文

相关阅读:
WOJ 1055
做人做事
 实现Runnable接口和扩展Thread使用场景
 利用Perf4j 对java项目进行性能监控
 android画笔错位问题的解决
 IE常见的CSS的BUG（二）
激动啊，终于诞生了，编译了属于俺自己的 JDK
图像处理特征不变算子系列之Moravec算子（一）
对象的动态建立和释放
 用TinyXml2读取XML文件的一个简单Demo

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