css--选择器及常用字体样式

CSS 层叠样式表 (cascading style sheets)

1 如何在网页中引入css代码

　　1）行内式 2）内嵌式 3）外链式 link 4）导入式 @import url("css/base.css");

　　加载优先级:就近原则行内式>内嵌式>外链式>导入式推荐外链式，内容与表现分离

2　选择器

　　css选择器优先级

　　总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

　　在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式　　

　　标签选择器标签名{} 一般对一类标签设置样式

　　id选择器 #id值{} 使用较少，通常用于独一无二的元素

　　类选择器　　.class值{} 使用最多

　　通配符选择器 *{} 优先级低

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符选择器  *{}     优先级低*/
        *{
            padding: 0;
            margin: 0;
        }


        /* 标签选择器  多个标签用逗号隔开 */
        h2,p{
            background-color: red;
        }
       
       /* id选择器  #id值唯一，不能重复,多个的话用逗号隔开 */
        #box1{
            background-color: royalblue;
        }

        /* 类选择器    .class值，多个用逗号隔开  */
        .box2,.box3{
            background-color: salmon;
        }





    </style>
</head>
<body>

    <h2>标题</h2>
    <p>第一段</p>
    <p>第二段</p>


    <div  id="box1">111</div>
    <div class="box2">222
        <div class="box3"> 333</div>
    </div>

    
</body>
</html>

选择器

　并集选择器(群组选择器)、交集选择器、后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 并集选择器（群组）  用逗号将多个标签名隔开 */
        /* h2,p,ul{
           color: salmon;
        } */

        /* 交集选择器  eg：既是li 又是class为li1  .号前没有空格*/
        li.li1{
            color: seagreen;
        }

        /* 后代选择器 eg：ul 的后代中有 class为li1的   .号前有空格 */
        ul .li1{
            background-color:slateblue;
        }

        ol li{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li class="li1">aaa</li>
            <li>bbb</li>
        </ul>
    </dv>

    <ol>
        <li>ol--aaa</li>
        <li>ol--bbb</li>
    </ol>
    <h2>段落</h2>

    <p id="p">111</p>
  
    
</body>
</html>

复合选择器

　　子代选择器：父选择器>子选择器{} 选择器之间用>连接 eg:ul>li{}

　　毗邻选择器选择器之间用 + 紧跟着h3标题的标签 eg:h3+p{}

　　兄弟选择器选择器之间用~ eg:h3~p{}

-----------------------------------------------------------------------------------------------------------

　　样式设置

　　设置文字样式　　clolor:red;

　　关于文字颜色设置方式（3种）：1)颜色单词 2）rgb(0~255,0~255,0~255) 3)十六进制 eg: #ff0000

　　文字对齐 text-align left/center/right 该属性对div p li等块级元素有效

　　文本缩进　text-indent:2em; 不要用绝对的eg:32px; em为当前像素font-size的 n em 倍, em 相对单位 1em默认是16px

　　文本修饰 text-decoration underline 下划线 overline 上划线 line-through中划线 none没有(默认值) 设置文本的装饰效果，主要用来删除链接的下划线

　　字体相关

　　font-size:20px; 设置字号

　　font-weight:normal 或 bold; 设置文字粗细 normal 400 bold 700

　　font-style:italic; 斜体　　设置字体样式 normal 正常 italic斜体

　　font-family:宋体，”Microsoft YaHei“；设置字体，若字体名中有空格，则要用引号引起来

　　line-height:20px; 一行字的高度，实际为下一行的基线到上一行基线的高度，基线位置由字体确定；一般对于一行文本垂直居中可让height line-height的值相等

　　font字体简写字号和字体同时有才可简写

　　 font:italic 400 20px/20px ”宋体“；斜体，正常粗细，字号，行高宋体

　　列表无序列表有序列表

　　　　　无序列表-列表项标记用特殊图形（如小黑点、小方框等）

　　　　　有序列表-列表项的标记用数字或字母

　　　　　不同的列表项标记：属性 list-style-type 属性值:none去掉标记 circle square uper-roman 大写罗马字母 lower-alpha小写英文字母

　　　　　　　　　　　　　　图像列表项标记 list-style-image:url('xxx.gif'); 会有浏览器兼容性问题

　　表格 border属性 1px solid black; 1px黑实线

　　　　border-collapse:collapse; 折叠边框，表格的边框是否被折叠成一个单一的边框或隔开

　　　　注意：如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的

　　绝大多数标签都可以看成一个盒子有宽高或可放内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 20px;   /*内容的宽*/
            height: 20px;   /*内容的高*/
            background-color: aqua;  
            padding: 10px; /*内边距   内容到边框的距离*/
        }
    </style>
</head>
<body>
 <div class="box1"></div>
 <div class="box2"></div>
</body>
</html>

盒子模型

posted @ 2020-07-20 17:26 NodeHzi 阅读(553) 评论(0) 收藏举报

刷新页面返回顶部

NodeHzi

css--选择器及常用字体样式

公告