码迷,mamicode.com
首页 > Web开发 > 详细

CSS

时间:2018-09-18 22:39:14      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:code   水果   meta   元素选择器   美化   语法   pre   外部   --   

1. CSS概述

cascading style sheets:层叠样式表

主要作用:用来美化html页面  html决定网页的骨架

语法在一个style标签中,填写css内容,最好将style标签写在head的标签中

2. CSS的选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <!--
        <style>
            选择器{
                属性名称1:属性的值;
                属性名称2:属性的值;
            } 

            元素选择器:
                元素的名称{
                    属性名称:属性的值;
                    属性名称:属性的值;
                }
            ID选择器:
                以#开头 ID在整个页面中必须是唯一的
                #ID的名称{
                    属性名称:属性的值
                    属性名称:属性的值
                }
            类选择器:
                .类的名称{
                    属性名称:属性的值
                    属性名称:属性的值
                }
        </style>
     -->
     <style>
         div0{
             color:red;
             font-size: 50px;
         }
         span0{
             color:blue;
         }
         #div1{
             color:red;
         }
         .fruit{
             color:pink;
         }
     </style>
</head>
<body>
    <div0>大家都很厉害哟</div0>
    <span0>好困啊</span0>
    <div id = "div1">JAVAEE</div>
    <div class = "fruit">水果</div>
</body>
</html>

3. CSS的引用方式

3.1 内部样式

3.2 外部样式

@CHARSET "UTF-8";
<style>
    div0{
        color:red;
        font-size: 50px;
    }
    span0{
        color:blue;
    }
    #div1{
        color:red;
    }
    .fruit{
        color:pink;
    }
</style>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS外部引用</title>
    <link rel = "stylesheet" href = "style.css" />
</head>
<body>
    <div0>大家都很厉害哟</div0>
    <span0>好困啊</span0>
    <div id = "div1">JAVAEE</div>
    <div class = "fruit">水果</div>
    <div style = "color:pink">小小小</div>
</body>
</html>

3.3 行内样式:示例见上

CSS

标签:code   水果   meta   元素选择器   美化   语法   pre   外部   --   

原文地址:https://www.cnblogs.com/feng-ying/p/9671185.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!