CSS入门学习

来源：互联网发布：js 日期控件编辑：程序博客网时间：2024/05/18 22:45

<!--CSS的三种写法：         (1)行内样式表：   <p style="color:red">         (2)内部样式表：  <style type="text/css">                    body{background-color:red}                      p {margin-left:2-0px}                    </style>         (3)外部样式表：               <link rel="stylesheet" type="text/css" href="outside.css">  --><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <!--3.外部样式：推荐写法，样式可以复用，做到了样式和文件的分离-->    <link rel="stylesheet" href="../../css/first.css"/>    <!--2.内部样式：在当前页面可用，比行内写法要好一些；缺点：多个页面无法共用一个样式，id值不能相同-->    <p>    <style type="text/css">        /*id选择器*/        #price{            color: plum;            font-size: 40px;        }    </style>    <title>css入门</title></head><body><!--1.行内样式:样式只有当前标签可用，写法比较繁琐，这种写法要极力避免--><p>   电脑<span style="color: coral;font-size: 40px">1</span>元起</p>   手机<span id="price1">1</span>元起</p><p>    iPad<span id="price">1</span>元起</p></body></html>

first.css

#price1{    color:cornflowerblue;    font-size: 40px;}

根据"就近原则"：     1.行内样式的 优先级高于内部样式     2.内部样式的优先级高于外部样式<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        #price{            color: darksalmon;            font-size: 50px;            text-decoration: underline;        }    </style>    <link rel="stylesheet" href="../../css/first.css"/>    <title>css样式的优先级</title></head><body><p>    电脑<span id="price">1</span>元起</p></body></html>

选择器的使用：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        ul{            list-style: none;            border-radius: 20px;        }        /*标签选择器：作用于当前页面的所有匹配标签*/        li{            color: #ff7300;            font-size: 30px;        }        /*类选择器：作用于当前页面所有class值为yellow的标签*/        .yellow{            color: yellow;        }        /*id选择器：id选择器具有唯一性*/        #home{           color: #cccccc;        }    </style>    <title>选择器</title></head><body><ul>    <li>家用电器</li>    <li class="yellow">各类书籍</li>    <li>手机数码</li>    <li class="yellow">日用百货</li></ul><ul>    <li id="home">小星星1</li>    <li>小星星2</li></ul></body></html>

***建议css文件尽可能使用外部样式，这样会使得代码简洁明了

效果图：

0 0