CSS基本语法

最新推荐文章于 2022-08-11 09:21:35 发布

greatverve

最新推荐文章于 2022-08-11 09:21:35 发布

阅读量723

点赞数

分类专栏： CSS学习文章标签： css class html java div

本文链接：https://blog.csdn.net/greatverve/article/details/2270719

版权

CSS学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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{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