寒假学习web前端-CSS语法

博主比较懒就不修饰一下了,打卡学习。
笔记都是在中国大学MOOC学习时摘录的,感兴趣可以看看。

*CSS 语法
p{
    font-size:12px;  //字号
    color:blue;      //文字颜色
    font-weight:bold;   //加粗
}

*CSS添加方法

(1)行内添加方法
<p style="color:red;">
   天使投资指早期投资,尤其指个人早期投资。
</p>

(2)内嵌样式
<head>
    <style type="text/css">
        p{color:red;}
    </style>
</head>
<body>
    <p>
        天使投资指早期投资,尤指个人早期投资
    </p>
</body>

(3)单独加文件
假设我们做了外部样式表达文件“style.css”
我们就可以引用它
<head>
    <link rel="stylesheet" href="css/style.css."/>
</head>
    <body>
    <p>天使投资指早期投资,尤指个人早期投资。</p>
    </body>

(4)优先级   就近原则
行内样式>内嵌样式>链接样式>浏览器默认样式

*CSS选择器
(1)标签选择器
CSS:   <style type="text/css">
        body{background-color:#ccc;
            text-align:center;
            font-size:12px;
        }
        h1{font:"";font-size:20px;}
        p{color:red;font-size:16px;}
        hr{width:200px;}
        </style>

html:   <body>
        <h1>标题</h1>
        <hr/>
        <p>正文的段落</p>
        版权所有
        </body>

(2)类别选择器
css:    <style type="text/css">
           p{ font-size:12px;}
           .one{font-size;18px;}
           .two{font-size:24px;}
        </style>
html:   <body>
            <p class="one">类别1</p>
            <p class="one">类别1</p>
            <p class="two">类别1</p>
            <p class="two">类别1</p>
            <p>普通段落中的文字</p>
        </body>

(3)ID选择器
css:    <style type="text/css">
            #one{font-size:12px;}
            #two{font-size:24px;}
        </style>

html:   <body>
            <p id="one">文字1</p>
            <p id="two">文字2</p>
        </body>

(4)嵌套声明
css: <style type="text/css">
        span{color:red;}
     </style>
html:<body>
<p><span>天使投资</span>是投资的一种方式</p>
        </body>

(5)集体声明
css:    <style type="text/css">
        h1,p{text-align:center}
        </style>
html:   <body>
        <h1>欢迎访问论坛</h1>
        <p>欢迎访问论坛</p>
        </body>

(6)全局申明
css:    <style type="text/css">
        *{
            text-align:center;
        }
        </style>

html:  <body>
        <h1>欢迎访问论坛</h1>
        <p>欢迎访问论坛</>
        <h2>欢迎访问论坛</h2>
</body>
发布了10 篇原创文章 · 获赞 0 · 访问量 328

猜你喜欢

转载自blog.csdn.net/want_to_fly_/article/details/103962048