2 css简介

简介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>lizi_test</title> 
<link type="text/css" rel="stylesheet" href="../static/base.css">
<style>
#para1 
{
    text-align:center;
    color:red;
} 
.center {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
</style>
</head>

<body>
<div class="center">
    <p>内联样式:直接在标签内使用style控制样式</p>
    <p>内部样式表:id选择器(#);class选择器(.)</p>
    <p>外部样式表:使用 <link> 标签链接到样式表</p>
    <p>样式优先级：内联样式>内部样式>外部样式>浏览器默认样式</p>
    常用样式：
    <ul>
        <li>color：颜色</li>
        <li>margin：外边距</li>
        <li>font-size：字号</li>
        <li>font-family：字体</li>
        <li>text-align：文本对齐方式</li>
    </ul>
    更多选择器：
        <ul>
        <li>后代选择器(以空格分隔)</li>
        <li>子元素选择器(以>分隔)</li>
        <li>相邻兄弟选择器(以+分隔)</li>
        <li>普通兄弟选择器(以~分隔)</li>
    </ul>
    <p>更多选择器细节：https://www.runoob.com/cssref/css-selectors.html</p>

    <p style="color: gold; font-size:30px">内联样式</p>

    <p id="para1">Hello World!</p>
</div>
</body>
</html>

 

posted @ 2021-03-27 16:09  栗子测试开发  阅读(90)  评论(0)    收藏  举报