CSS基础

最新推荐文章于 2024-11-01 12:26:05 发布

gyensxty

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量299

点赞数

文章标签： css class html stylesheet 浏览器 java

本文链接：https://blog.csdn.net/gyensxty/article/details/2139638

版权

CSS分类：
        I.内嵌样式(Inline Style),类似于HTML中的属性
        II.内部样式表(Internal Style Sheet):
                在HTML中头部专门定义，然后在Body中使用。
        III.外部样式表(External Style Sheet):
                专门用一个文件来定义。

1).内嵌样式：
例：
<html>
        <head>
                <title>使用内嵌样式</title>
        </head>　
        <body style="background-color:#ccffee;">
                <p style="font-size:16px;color:red">第一段文字。</p>
                <p style="font-style:italic;fontsize:20px;color:#bb22cc">
                        第二段文字。
                </p>
        </body>
</html>

2).内部样式表：
在HTML页面的头信息元素<head>中给出，可以同时设置多个标记所定义信息的显示效果。内部样式表只对所在的网页有效。
例：

<html>
        <head>
                <title>使用内部样式表</title>
                <style type="text/css">
                        body{background-color:#ccffee}
                        h2{text-align:center;color:red}
                        p.mystyle1{font-size:20px;color:blue}
                        p.mystyle2{font-style:italic;font-size:40px;
                        color:#dd44aa;text-align:center}
                </style>
        </head>
        <body>
                <h2>标题文字</h2>
                <p class="mystyle1">第一段文字。</p>
               <p class="mystyle2">第二段文字。</p>
                <p class="mystyle1">第三段文字。</p>
                <p>第四段文字。</p>
                <p class="mystyle2">第五段文字。</p>
         </body>
</html>

3).外部样式表：
例(需要两个文件)：
my.css文件：

body{background-color:#ccffee}
h2{text-align:center;color:red}
p.mystyle1{font-size:20px;color:blue}
p.mystyle2{font-style:italic;font-size:40px;color:#dd44aa;text-align:center}

my.html文件：

<html>
        <head>
                <title>使用外部样式表</title>
                <link href="my.css" rel="stylesheet" type="text/css">
        </head>
        <body>
                <h2>标题文字</h2>
                <p class="mystyle1">第一段文字。</p>
                <p class="mystyle2">第二段文字。</p>
                <p class="mystyle1">第三段文字。</p>
                <p>第四段文字。</p>
                <p class="mystyle2">第五段文字。</p>
        </body>
</html>

样式的优先级，按从高到低的顺序依次为：
1).内嵌样式
2).内部样式表
3).外部样式表
4).浏览器缺省样式
如果不同样式的作用范围出现重叠，则高优先级样式将覆盖低优先级的设置，最后一次设置覆盖先前的设置。

CSS基本语法：

CSS样式主要由三部分组成：
.选择器
.属性名
.属性值

例：

<html>
        <head>
                <title>CSS基本语法</title>
                <style type="text/css">
                        p{color:#aa66cc}
                        h2{text-align:center;color:red}
                        p.mystyle1{font-size:20px;color:blue}
                        p.mystyle2{font-style:italic;font-size:40px;
                              color:#00ffff;text-align:center}
                        h1,h3,h4,h5,h6,p.mystyle3{text-align:center;color:green}
                        .mystyle{text-align:right;color:#ff00ff}
                </style>
        </head>
        <body>
                <h2>h2标题文字</h2>
                <h5>h5标题文字</h5>
                <p class="mystyle1">第一段文字</p>
                <p class="mystyle2">第二段文字</p>
                <p class="mystyle3">第三段文字</p>
                <p>第四段文字</p>
                <p class="mystyle">第五段文字</p>
                <h4 class="mystyle">h4标题文字</h4>
                <div class="mystyle">DIV块内文字</div>
         </body>
</html>

CSS注释：
/*与java中一种注释一样，可以跨行*/

CSS字体属性:
主要字体属性包括：
.font-family
        设置字体类型，如"Arial","宋体"等
.font-size
       设置字体大小，常用度量单位pt和px
.font-style
        设置字体风格，可选值normal,italic和oblique
.font-weight
        设置字体“重量”，常用值为normal和bold
.font
        综合设置上述各种字体属性
例:

<html>
        <head>
                <title>CSS字体属性</title>
                <style type="text/css">
                        p.mf1{font-family:courier;fon-size:20px}/*courier等距*/
                        p.mf2{font:normal italic bold 20pt 黑体}
                </style>
        </head>
        <body>
                <p class="mf1">The first paragrah</p>
                <p class="mf2">第二段文字</p>
        </body>
</html>

CSS常用文本属性：
.text-align
        设置文本对齐方式，可选值left,center,right,justify(两端对齐)
.text-indent
        设置首行缩进，其值可采用绝对或相对的长度单位及百分比
.line-height
        设置行高，其值可采用绝对或相对的长度单位及百分比
.letter-spacing
        设置字符间距，其值可采用绝对或相对的长度单位
.color
        设置文字颜色

例：
<html>
        <head>
              <title>CSS常用文本属性</title>
               <style type="text/css">
                       .t1{text-align:left;text-indent=1cm;line-height=20px;letter-spacing=150%;color=red}
                       .t2{text-align:center;text-indent=0;letter-spacing=1em;color=blue;font-weight:bold}
                      /*em为一个字符的距离*/
                </style>
        </head>
        <body>
                <p class="t1">古希腊有一句民谚说：“聪明的人，借助经验说话;而更聪明的人，根据经验不说话。”西方还有一句著名的话：雄辩是银，倾听是金。中国则流传着“言多必失”和“讷于言而敏于行”这样的济世名言。    </p>
                <p class="t2">沉舟侧畔千帆过，病树前头万木春</p>
        </body>
</html>

CSS的长度单位：
在CSS样式表中，长度单位分为两类:
1).绝对长度单位
        绝对长度单位         说明
        in                               英寸Inches(1英寸=2.54厘米)
        cm                             厘米Centimeters
        mm                            毫米Millimeters
        pt                               点Points(1点=1/72英寸)
        pc                              皮卡Picas(1皮卡=12点)
2).相对长度单位：
        相对长度单位         说明
         em                     元素的字体高度
         ex                      字母x的高度
         px                     像素Pixels
         %                      百分比Percentage