CSS基础总结

最新推荐文章于 2024-08-13 17:07:13 发布

chengxie4803

最新推荐文章于 2024-08-13 17:07:13 发布

阅读量193

点赞数

文章标签：嵌入式人工智能

原文链接：https://my.oschina.net/u/2533215/blog/875712

版权

CSS全称为”层叠样式表”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

CSS样式组成：

CSS注释代码：/*注释语句*/

1、CSS样式代码插入形式

主要分为：内联式、嵌入式、外联式

/*优先级：内联式——>嵌入式——>外部式   （前提是嵌入式在外部式后面）*/

/*内联式*/
<html>
 <head>
 </head>
 <body>
  <p style = "color:red">Hello World!</p>
  <p>Hello Stranger!</p>
 </body>
</html>


/*嵌入式*/
<html>
 <head>
  <style type = "text/css">
  span{
  color:blue;
  }
  </style>
 </head>
 <body>
 <p>Hello World!</p>
 <p><span>Hello Stranger!</span></p>
 </body>
</html>



/*外部式(外联式)*/
<html>
 <head>     /*href命名必须与另一个文件名一致 rel="stylesheet" type="text/css"为固定写法，不可修改*/
  <link href="style.css" rel="stylesheet" type="text/css" />  
 </head>
 <body>
  <p><span>Hello World!</span></p>
  <p>Hello Stranger!</p>
 </body>
</html>
/*创建另外一个文件为style.css*/
span{
   color:red;
   font-size:50px;
}

2、选择器

类选择器、ID选择器不同点：

1、ID选择器只能在文档中使用一次，类选择器可多次使用

2、可以使用类选择器为一个元素同时设置多种样式

/*标签选择器*/
/*格式：标签名{css样式代码;}*/
<html>
 <head>
     <style type = "text/css">
         span{color:red;}   /*把标签为span的设置为红色*/
     </style>
 </head>
 <body>
  <p><span>Hello World!</span></p>
  <p>Hello Stranger!</p>
 </body>
</html>


/*类选择器*/
/*格式：.类选择器名{css样式代码;}*/
<html>
 <head>
     <style type = "text/css">
         .stress{color:blue;font-size:50px;} 
     </style>
 </head>
 <body>
  <p class = "stress">Hello World!</p>  /*在标签内加入class = "类选择器名"*/
  <p>Hello Stranger!</p>
 </body>
</html>


/*ID选择器*/
/*格式：#ID选择器{css样式代码;}*/
<html>
 <head>
     <style type = "text/css">
         #setRed{color:red;font-size:50px;}    /*格式为#ID选择器名称*/
     </style>
 </head>
 <body>
  <p id = "setRed">Hello World!</p>   /*此处注意是id = "ID选择器名称" 并非class = "类选择器名称"*/
  <p>Hello Stranger!</p>
 </body>
</html>


/*子选择器*/
/*格式：.类选择器名>第一代子元素名{css样式代码;}*/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   /*忽视*/
<style type = "text/css">
    .game>li{border:1px solid red;}  /*li为标签<ol>的第一代子元素 添加边框样式（粗细为1px， 颜色为红色的实线）*/
</style>                                
</head>
<body>
<ol class = "game">
    <li>梦幻西游  /*此处标签<li>为第一代子元素*/
        <ul>
            <li>梦幻西游1.0</li>
            <li>梦幻西游2.0</li>
            <li>梦幻西游3.0</li>
        </ul>                           /*此处结构*/
    </li>                              /* game */
    <br />                           /*梦幻西游 热血传奇*/
    <li>热血传奇                 /*1.0 2.0 3.0  1.0 2.0 3.0*/
        <ul>
            <li>热血传奇1.0</li>
            <li>热血传奇2.0</li>
            <li>热血传奇3.0</li>
        </ul>
    </li>
</ol>
</body>
</html>


/*包含选择器（后代选择器）*/
/*格式：.类选择器名称 标签名{css样式代码;}*/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type = "text/css">
    .game li{border:1px solid red;}  /*game li之间为空格*/
</style>
</head>
<body>
<ol class = "game">   /*作用于标签<li>的所有后代*/
    <li>梦幻西游         
        <ul>
            <li>梦幻西游1.0</li>
            <li>梦幻西游2.0</li>
            <li>梦幻西游3.0</li>
        </ul>
    </li>
    <br />
    <li>热血传奇
        <ul>
            <li>热血传奇1.0</li>
            <li>热血传奇2.0</li>
            <li>热血传奇3.0</li>
        </ul>
    </li>
</ol>
</body>
</html>


/*通用选择器*/
/*格式：* {css样式代码；}*/
<html>
<head>
    <style type = "text/css">
        * {color:blue;font-size:50px;}   /*作用所有标签*/
    </style>
</head>
<body>
<p>Hello World!</p>
<span>Hello Stranger!</span>
</body>
</html>


/*伪类选择符*/
/*格式：标签名:hover{css样式代码;}*/
<html>
<head>
    <style type = "text/css">
        p:hover{color:deeppink;font-size:50px;}   /*鼠标划过标签<p>会使字体颜色变为深粉色，字体大小为50*/
    </style>
</head>
<body>
<p>Hello World!</p>
<span>Hello Stranger!</span>
</body>
</html>


/*分组选择符*/
/*格式：标签名，标签名，标签名....{css样式代码；}*/
<html>
<head>
    <style type = "text/css">
        h1,span{color: #00ffff;}  /*标签<h1>、<span>设置为#00ffff色*/
    </style>
</head>
<body>
<h1>Hello World!</h1>
<p>Hello Stranger!</p>
<span>Hi Turing!</span>
</body>
</html>

3、继承、特殊性、层叠、重要性

/*继承*/
/*某些css样式具有继承性*/

/*示例1*/
<html>
<head>
    <style type = "text/css">
        p{color:blue;}           /*标签<p>及子标签均继承*/
    </style>
</head>
<body>
<p>Hello <span>World!</span></p>
</body>
</html>

/*示例2*/
<html>
<head>
<style type = "text/css">
    p{border:2px solid blue;}     /*标签<p>继承，子标签<span>不继承*/
</style>
</head>
<body>
<p>Hello <span>Alan Turing!</span></p>
</body>
</html>


/*特殊性*/
/*浏览器根据权值高低执行*/
/*标签权值1，类选择符权值10，ID选择符权值100*/
<html>
<head>
    <style type = "text/css">
        p{color:green;}         /*标签的权值为1*/
        .game{color:deeppink;}  /*类选择符的权值为10，所以执行此语句*/
    </style>                    /*p{color:red;} 权值1*/
</head>                         /*p span{color:green;} 权值1+1*/
<body>                          /*p span.waring{color:blue;} 权值1+1+10=12*/
<p class = "game">Hello World!</p>
</body>
</html>


/*层叠*/
<html>
<head>
    <style type = "text/css">
        p{color:green;}
        p{color:deepskyblue;}        /*相同权值 p{color:deepskyblue;}会覆盖上面的*/
    </style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>


/*重要性*/
<html>
<head>
    <style type = "text/css">
        p{color:green!important;}     /*在分号前加入!important语句 设置为最高权值*/
        p{color:deepskyblue;}
    </style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

4、排版

/*设置字体*/
/*格式:body{font-family:"字体名";}*/
<html>
<head>
    <style>
        p{font-family:"Microsoft JhengHei";}  /*<p>字体设置为微软正黑体*/
        span{font-family:"PMingLiU";}         /*<span>字体设置为新细明体*/
    </style>
</head>
<body>
<p>Hello <span>World!</span></p>
</body>
</html>


/*大小、粗体、斜体、下划线、删除线*/
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        h1{font-size:50px;}       /*设置<h1>字体大小为50px*/
        #game{font-weight:bold;}   /*设置id选择符game的字体为加粗*/
        .speed{font-style:italic;}   /*设置类选择符speed的字体为斜体*/
        .magic{text-decoration:underline;}    /*设置类选择符magic的字体添加下划线*/
        #price{text-decoration:line-through;}   /*设置id选择符price的字体添加删除线*/
    </style>
</head>
<body>
<li><h1>热门电影榜</h1></li>
<ol>
        <li><span id = "game">模仿游戏</span>&nbsp;&nbsp;&nbsp;$1.00</li>   /*&nbsp;为HTML中的空格*/
        <li><span class = "speed">速度与激情系列</span>&nbsp;&nbsp;&nbsp;$5.00</li>
        <li><span class = "magic">魔戒系列</span>&nbsp;&nbsp;&nbsp;$8.00</li>
        <li>黑鹰坠落&nbsp;&nbsp;&nbsp;$<span id = "price">100.00</span>&nbsp;$999.00</li>
    </ol>
</body>
</html>


/*缩进、行间距、文字间距、对齐*/
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type = "text/css">
        p{text-indent:2em;}       /*<p>设置为2倍文字大小缩进*/
        #first{line-height:3em;}    /*first设置行间距3*/
        .second{letter-spacing:20px;}   /*second文字间距设置为20px*/
        .third{word-spacing:20px;}  /*thrid单词间距设置为20px*/
        div{text-align:center;}     /*块div设置为居中,居左left,居右right*/
    </style>
</head>
<body>
<p><span id = "first">你想知道我对你的爱情是什么吗？就是从心底里喜欢你，觉得你的一举一动都很亲切，不高兴你比喜欢我更喜欢别人。你要是喜欢了别人我会哭，但是还是喜欢你。你肯用这样的爱情回报我吗？就是你高兴我也高兴，你难过时我来安慰你，还有别爱别人！</span></p>
<p><span class = "second">你生了气就哭,我一看见你哭就目瞪口呆,就像一个小孩子做了坏事在未受责备之前目瞪口呆一样,所以什么事你先别哭,先来责备我,好吗?</span></p>
<span class = "third">Hello World!</span>
<div><img src = "http://img3.imgtn.bdimg.com/it/u=3429646592,513222343&fm=210&gp=0.jpg"></div>
</body>
</html>

5、盒模型

元素分类：块状元素、内联元素、内联块状元素

常用块状元素：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

可将内联元素转为块状元素格式：内联元素名{display:block;}

特点：1.每个块状元素都从新的一行开始，并且其后的元素也另起一行

2.元素的高度、宽度、行高以及顶和底边距都可设置

3.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用内联元素：
<a>、<span>、<br />、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

可将块状元素转为内联元素格式：块状元素名{display:inline;}

特点：1.和其他元素都在一行上

2.元素的高度、宽度及顶部和底部边距不可设置

3.元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用内联块状元素：
<img>、<input>

可将元素转为内联块状元素格式：元素名{display:inline-block;}

特点：1.和其他元素都在一行上

2.元素的高度、宽度、行高以及顶和底边距都可设置。

宽度width

高度height

填充padding

边框border

边界margin

㈠、宽度、高度

实际指上图中内容

㈡、填充

div{padding:20px 10px 15px 30px;}  /*数字顺序一定不能错 上、右、下、左(顺时针)*/

/*也可分开写*/

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

/*四个方向都填充为10px*/
div{padding:10px;}

/*上下填充为10px，左右为20px*/
div{padding:10px 20px;}

㈢、边框

/*边框样式*/
div{border:2px  solid  red;}    /*注意顺序：粗细、样式、颜色*/

/*分开写*/
div{
    border-width:2px;         /*thin、medium、thick可选，常用px*/
    border-style:solid;       /*dashed(虚线)、dotted(点线)、solid(实线)*/
    border-color:red;   
}

/*单独设置边框*/
div{border-bottom:1px solid red;}   /*top、right、bottom、left(上、右、下、左）*/

㈣、边界

div{margin:20px 10px 15px 30px;}   /*上、右、下、左*/

/*分开写*/
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

/*所有边界都为10px*/
div{ margin:10px;}

/*上下边界为10px，左右为20px*/
div{ margin:10px 20px;}

6、布局模型

布局模型分三种：流动模型（Flow）、浮动模型（Float）、层模型（Layer）

/*流动模型（默认网页布局模式）*/
/*特征1：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布（100%）*/
/*特征2：内联元素会在所处的包含元素内从左至右水平分布显示*/
<html>
<head>

</head>
<body>
<h1>Hello Stranger!</h1><div>Hello World!</div>  /*h1、div均为块状元素*/
<br />
<h1>Hello Stranger!<span>Hi Truing!</span><a>I'm a Gay</a></h1><div>Hello World!</div>
</body>
</html>


/*浮动模型*/
<html>
<head>
    <style>
        div{width:200px;
            height:200px;
            border:2px solid deepskyblue;
            float:left;                        /*left（左对齐）、right（右对齐）*/
        }                                      /* #div1{float:left;}  */
    </style>                                   /* #div2{float:right;}  一左一右*/
</head>
<body>
<div id = "div1">Hello World!</div>
<div id = "div2">Hello Stranger!</div>
</body>
</html>


/*层模型*/
/*分三种：绝对定位、相对定位、固定定位*/
/*绝对定位*/
/*基点为最接近一个具有定位属性（块状元素）的父包含块，若不存在，则
<html>
<head>
    <style>
        div{width:200px;
            height:200px;
            border:2px solid deepskyblue;
            position:absolute;                /*格式：position:absolute;*/
            left:300px;                       /*相对于屏幕的方向 实际看到是向右*/
            top:100px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

/*相对定位*/
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        div{width:200px;
            height:200px;
            border:2px solid deepskyblue;
            position:relative;                    /*相对于以前的位置移动,偏移前的位置保留不动*/
            left:300px;
            top:100px;
        }
    </style>
</head>
<body>
<div></div><span>我还在这里！</span>
</body>
</html>

/*固定定位*/
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        div{width:200px;
            height:200px;
            border:2px solid deepskyblue;
            position:fixed;
            left:100px;                            /*以浏览器窗口为基点*/
            bottom:0px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

/*relative与absolute组合使用*/
/*条件：参照定位的元素必须是相对定位元素的前辈元素*/
/*     参照定位的元素必须加入position:relative*/
/*     定位元素加入position:absolute        */
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        #div1{width:400px;
              height:400px;
            position:relative;      
        }
        #div2{
            position:absolute;
            bottom:200px;
            left:200px;
        }
    </style>
</head>
<body>
<div id = "div1">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491898577657&di=a5dba7c1482dd86115b0fb3caffb9e34&imgtype=0&src=http%3A%2F%2Fpic2.orsoon.com%2F2016%2F1215%2F20161215100551580.jpg"/>
    <div id = "div2">
        ●←点的位置是中点
    </div>
</div>
</body>
</html>

7、代码缩写

/*盒模型缩写*/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
    .div1{margin:100px;}             /*若上右下左均为100px，可写为margin:100px;*/
</style>                        /*top、bottom值相同，left、right值相同可写为margin:100px 100px;*/
</head>                       /*若left、right值相同，top、bottom值不同可写为margin:100px 20px 50px;*/
<body>
<div class = "div1">
    <table>
        <li><h1>热门游戏</h1></li>
        <ol>
            <li>热血传奇</li>
            <li>梦幻西游</li>
            <li>九阴真经2</li>
        </ol>
    </table>
</div>
</body>
</html>


/*颜色缩写*/
/*若颜色值为16进制时，可将每两位相同的缩写一半*/
p{color:#000000;} 

p{color:#000;}

p{color:#336699;}

p{color:#369;}


/*字体缩写*/
body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

/*缩写如下，至少要指定 font-size 和 font-family 属性,其他属性未指定则使用默认。*/
/*在缩写时 font-size 与 line-height 中间要加入“/”斜扛*/
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

转载于:https://my.oschina.net/u/2533215/blog/875712

chengxie4803

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础总结

CSS全称为”层叠样式表”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 CSS样式组成： CSS注释代码：/*注释语句*/ 1、CSS样式代码插入形式主要分为：内联式、嵌入式、外联式 /*优先级：内联式——>嵌入式——>外部式 ...
复制链接

扫一扫