CSS基础 2_css 右边显示abcdefg-CSDN博客

本文链接：https://blog.csdn.net/Liuxin2448/article/details/115255248

标签选择器，例如p
上下文选择器，也叫做后代选择器，例如标签1 标签2 {声明}
类型选择器，例如.class
ID选择器#，例如#id
子选择符 >，例如标签1 > 标签2 标签2必须是标签1的子元素。与其他常规的上下文选择符不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素
紧邻同胞选择器+，例如标签1 + 标签2 标签2必须紧跟在其同胞标签1的后面
一般同胞选择器~，例如标签1 ~ 标签2 标签2必须在（不一定紧挨着）其同胞标签1后面
通用选择器*，匹配任何元素
属性选择器：标签名[属性名]，例如a[href$=".com"]
属性值选择器：标签名[属性名=“属性值”]

浮動佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮動佈局</title>
</head>
<body>
    <h2>浮動佈局</h2>
    <p>
        浮动布局让水平的排列处理更加简单方便
    </p>
    <style>
        .wrap{
                width:500px;
                height:500px;
                border:1px solid red;
        }
        .wrap>div{
                width :200px;
                height:200px;
                background-color:blue;
                float : right;
                /*  會有間隙的問題,解決方案是font-fize:0
                display: inline-block;
                */
        }
     </style>
     <!-- 此时我们会发现，两个盒子快速同行排列，
        并且呈现出顶对齐效果,且之间没有间隙，此
        时我们能可以自由的设置margin -->
     <div class="wrap">
         <div class="box1">1<br>2</div>
         <div class="box2">2</div>
         <div class="box3">3</div>
     </div>
     <hr/>

     <h3>浮动布局的原理</h3>
     <p>
        浮动布局，就是给盒子设置float属性，这个属性的值只有两个left或者right,设置后，盒子先会浮起来从当前行脱离默认文本流，进入到新的一层，我们将这层称为浮动层，然后按照设定的方向接着移动，直到遇到父级块的边缘，或者其他浮动块的边缘停止，与margin这种移动盒子方式不同，浮动只能设置移动的方向，但不能设置具体浮动多少距离

        讲解代码:
        
     </p>
   </body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .wrap {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }

        .wrap>div {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }

        .wrap>.box2 {
            float: right
            /*
            浮動的做法比使用margin推動更為方便
            */
        }
    </style>
    <!-- 此时我们会发现，两个盒子快速左右排列，并且呈现出
        顶对齐效果,且之间没有间隙，不用向原来那样，先同行
        排列，再苦哈哈的给一个盒子设置设置位置移动，来推它-->
    <div class="wrap">
        <div class="box1">1<br>2</div>
        <div class="box2">2</div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css hack</title>
</head>
<body>
    <h2>css hack</h2>
    <p>
        由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11、Firefox、Safari、Opera、
        Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面
        展现效果。这时为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的
        CSS样式，把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack<br/>
        filter:alpha(Opacity=60);
        -moz-opacity:0.6;
        opacity: 0.6;
    </p>
    <p>
        CSS Hack大致有3种表现形式，属性级Hack、选择器Hack以及IE条件Hack<br/>
        注意：尽可能减少对CSS Hack的使用
        <ol>
            <li>
                <ul>CSS 属性前缀法（即类内部 Hack）
                    <li>IE6 能辨认下划线" _"和星号" *"</li>
                    <li>IE7 能辨认星号*，但不能辨认下划线_</li>
                    <li>IE6~IE10都辨认"\9 "</li>
                    <li>firefox 前述三个都不能辨认</li>
                </ul>
            </li>
        </ol>
        例如:
        <!--
            <style> 
div{  
    background:green;/*for firefox*/  
    *background:red;/*for IE6 IE7*/  
}  
</style>
        -->
        <ol>
            IE条件注释法（即 HTML 头部援用 if IE Hack）
            <li>
                一切 IE (注：IE10+不再支持条件注释)能辨认 <!--[if IE]>IE阅读器显现的内容 <![endif]-->
            </li>
            <li>
                IE6及以下版本能辨认 <!--[if lt IE 6]>只在IE6-显现的内容 <![endif]--> 这类 Hack 不只对 CSS 生效，对写在判别语句里面的一切代码都会生效
            </li>
        </ol>
        

- 
- 。

    </p>
</body>
</html>

常见基础样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>常见基础样式</title>
	<style>
		.box{
			width: 500px; /*内容体宽度*/
			height: 500px;
			border:1px solid red; /*设置边框 */
			/*背景图*/
			background-image: url('./images/tour1.jpg');
			/*相对路径：是指以使用该资源的文档为起点，查找资源
            文件目录的过程中所形成的路径。
			 如果是同级目录 "./"
			 如果是上级目录 "../"
			 项目中：文件夹，文件不要使用中文
			*/
			/*背景图平铺属性：
			   repeat:平铺，一般应用场景网页背景，利用一小块图案进行平铺
			*/
			background-repeat: no-repeat;
			/*背景图定位*/
			background-position: right bottom;
			/*颜色 图片 定位 平铺*/
			background:  url('./images/tour1.jpg') center center no-repeat;
			/*文字相关*/
			/*字体大小:浏览器默认字体大小 16px 最小字体12px*/
			font-size: 30px;
			/*字体颜色 rgb(68,146,250);*/
			color: #4492FA;
			/*字型: monospace 英文字符等宽*/
			font-family:monospace;
			/*字体加粗100-900
			   normal lighter bolder
			*/
			font-weight:lighter; 
			/*字体样式*/
			font-style: italic;            
            /*文本排列有关样式属性：center right left(默认)     */
            text-align: left;
            /*文字缩进  2em ：2倍的当前盒子字体大小*/
            text-indent: 1.5em;
            /*字体下划线*/
            text-decoration:line-through underline;
            /*字符间距*/
            letter-spacing: 0px;
            /*词间距:浏览器对单词的分辨，是按照连续字符的规律进行分辨的*/
            word-spacing: 0px;
			/*自动换行*/
			word-wrap: break-word;
			/*强制不换行*/
			white-space: nowrap;
			/*超出部分隐藏*/
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="box">中文的撒开了临时搭建弗兰克的酒</div>
</body>
</html>

为什么不建议用table进行布局

1、table比其它html标记占更多的字节。 (造成下载时间延迟，占用服务器更多流量资源) 2、table会阻挡浏览器渲染引擎的渲染顺序。会延迟页面的生成速度，让用户等待更久的时间 3、table里显示图片时需要把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加http会话数) 4、table会影响其内部的某些布局属性的生效（比如里的元素的height:100%）限制页面设计的自由性一旦学了CSS的知识后使用table做页面布局会变得更麻烦 1、table对于页面布局来说从语义上看是不正确的。(它描述的是表现，而不是内容) 2、table代码会让阅读者抓狂。(不但无法利用CSS，而且会不知所云，尤其在进行页面改版或内容抽取的时候） 3、table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: 30px auto;
            border: #aaa 4px double;
            border-collapse: separate;
            border-spacing: 0px
        }

        td,
        th {
            padding: 5px;
            text-align: center;
            border-color: #ddd;
            border-width: 1px;
            border-style: solid
        }

        #tb2 tr:nth-child(even) {
            background: #f1f1f1;
        }
    </style>
</head>

<body>
    <table id="tb1">
        <caption>財務報表的表格樣式</caption>
        <tr align="center">
            <td class="td1">用戶編號</td>
            <td class="td2">用戶名稱</td>
        </tr>
        <tr>
            <td class="td3">111</td>
            <td class="td4">張三</td>
        </tr>
        <tr>
            <td class="td3">222</td>
            <td class="td4">李四</td>
        </tr>
    </table>

    <table id="tb2">
        <caption>斑馬線效果的表格樣式</caption>
        <tr align="center">
            <td class="td1">用戶編號</td>
            <td class="td2">用戶名稱</td>
        </tr>
        <tr>
            <td class="td3">111</td>
            <td class="td4">張三</td>
        </tr>
        <tr>
            <td class="td3">222</td>
            <td class="td4">李四</td>
        </tr>
    </table>

    <table id="tb3">
        <caption>用div+css模拟表格对角线</caption>
        <tr>
            <th style="width:80px;">
                <div class="out">
                    <b>类别</b>
                    <em>姓名</em>
                </div>
            </th>
            <th>年级</th>
            <th>班级</th>
            <th>成绩</th>
            <th>班级均分</th>
        </tr>
        <tr>
            <td class="t1">张三</td>
            <td>三</td>
            <td>2</td>
            <td>62</td>
            <td>61</td>
        </tr>
        <tr>
            <td class="t1">李四</td>
            <td>三</td>
            <td>1</td>
            <td>48</td>
            <td>67</td>
        </tr>
        <tr>
            <td class="t1">王五</td>
            <td>三</td>
            <td>5</td>
            <td>79</td>
            <td>63</td>
        </tr>
        <tr>
            <td class="t1">赵六</td>
            <td>三</td>
            <td>4</td>
            <td>89</td>
            <td>66</td>
        </tr>
    </table>
    <style>
        #tb3 {
            border-collapse: collapse;
            border: 1px #525152 solid;
            width: 50%;
            margin: 0 auto;
            margin-top: 100px;
        }
        *{
            padding: 0px;
            margin: 0px;
        }
        #tb3 th,
        #tb3 td {
            border: 1px #525152 solid;
            text-align: center;
            font-size: 12px;
            line-height: 30px;
        }


        /*模拟对角线*/
        .out {
            border-top: 40px #D6D3D6 solid;
            /*上边框宽度等于表格第一行行高*/
            width: 0px;
            /*让容器宽度为0*/
            height: 0px;
            /*让容器高度为0*/
            border-left: 80px #BDBABD solid;
            /*左边框宽度等于表格第一行第一格宽度*/
            position: relative;
            /*让里面的两个子容器绝对定位*/
        }

        b {
            font-style: normal;
            display: block;
            position: absolute;
            top: -40px;
            left: -40px;
            width: 35px;
        }

        em {
            font-style: normal;
            display: block;
            position: absolute;
            top: -25px;
            left: -70px;
            width: 55x;
        }
    </style>
</body>

</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
</head>
<body>
    <span>abcd</span>
    <p>asdfasd</p>
    <h2>伪类选择器</h2>
    <p>
        伪类会为特定HTML的状态定义应用样式
    </p>
    <h3>链接伪类</h3>
    <p>
        <ol>
            <li>a:link向未被访问的链接添加样式</li>
            <li>a:visited向已被访问的链接添加样式</li>
                <li>a:hover当鼠标悬浮在元素上方时，向元素添加样式</li>
                    <li>a:active向被激活的元素添加样式</li>
            </ol>
            <b>在 CSS 定义中，a:hover必须被置于a:link和a:visited 之后才是有效的；a:active必须被置于a:hover之后才是有效的。伪类名称对大小写不敏感，注意顺序lvha。</b>
    </p>
    <a href="bb.html">bbbb</a>
    <a href="index.html">Index</a>
    <style>
        a:link{
            color:red;
            background-color: grey;
        }
        a:visited{
            color:blue;
        }
        a:hover{
            color:yellow;
        }
        a:active{
            color:green;
        }
    </style>
    <hr/>
    <h3>其它常见伪类</h3>
    <p>

    </p>
    <div class="tablist"> 
        <ul class="tabmenu"> 
           <li><a href="#tab1">标签一</a></li> 
           <li><a href="#tab2">标签二</a></li> 
           <li><a href="#tab3">标签三</a></li> 
        </ul> 
        <div id="tab1">tab1 content</div> 
        <div id="tab2">tab2 content</div> 
        <div id="tab3">tab3 content</div> 
     </div>
     <style>
     #tab1:target, #tab2:target, #tab3:target {
         color: blue;
     }
     </style>  
     <h3>结构化伪类</h3>
     <p>
        :first-child选择属于其父元素的首个子元素并为其设置样式,
        例如p:first-child表示p是其父元素的第一個子元素<br/>
        - :last-child
        - :nth-child(n) 

     </p>
     <p><span>asdflkasd</span>
         <span>1111111111</span>
     </p>
     <div>
         <p>sadfasdf</p>
         <p>123456</p>
     </div>
     <style>
p:nth-child(2) {
  color: blue;
} 
     </style>
     <hr/>
     <h1>伪元素</h1>
     <style>
         /*:before可以在元素的内容前面插入新内容*/
         h1:before {content:url(images/tour1.jpg)}
         h1:after {content:url(images/tour1.jpg)}
     </style>
</body>
</html>

总结

标签无论名字有任何不同，它最终在界面上渲染出来的都一个矩形盒子，所谓万物皆为盒子
盒子在界面上的分布关系只有2种，自上而下和从左到右
标签的排列主要有3种：
文档中的盒子，在界面中渲染时，其排列方式是由一个CSS属性display决定的，与标签的名称无关。盒子的display属性值有三种，将盒子分成了三大类 1. block : 块级标签
2. inline-block : 内联级标签 3. inline : 内嵌级标签

我一个
块级
标签
display:block块级标签

标签独占一行，可以让超文本从上到下排列
支持所有的CSS样式设置
垂直方向上的margin会重叠
在不设置宽度时，width大小为: 自动的情况下块级标签盒子在界面上默认占满父级内容宽度。此时在设置盒子水平方向的margin，border,padding时，都会向内压缩内容空间 (width空间）如果设置了宽度，盒子移动，符合margin,padding 基本移动规律 - 外边距坍塌问题，只出现在父级和子级都是块级标签的情况下

inline-block

可以让盒子同行排列
支持所有的CSS样式设置
间隙问题：在浏览器上同行排列的盒子，浏览器会将文档中对应标签之间的空白符解析成一个间隙并且该间隙大小不固定。不同浏览器、浏览器不同版本、相同浏览器在不同系统平台上，该间隙大小不一致，具有危害性，需要消除。
消除方法：为同行排列盒子的父级设置font-size:0；同时由于 font-size具有继承性，因此需要给子级恢复字体大小 - 对齐问题，默认情况下同行排列的盒子，是按照盒子内部最后一行文字的底部对齐，当文字行数不一样时会导致不对齐。通vertical-align属性可以设置盒子的对齐基线。一般情况常用三个值：top顶对齐、middle居中对齐、bottom底对齐
居中问题通过给父级设置text-align:center来实现 - 在不设置宽高大小的时候，由内容撑开宽度和高度

inline

inline标签，只用来放文字
不支持宽高设置
不支持上下margin设置，因此inline型标签需要从上到下移动，只能通过其他盒子推着它走，或者父级盒子带着它走
水平方向上的margin有效，并且相互叠加
其盒子大小只能由内部的文字大小撑开
最长用的inline型标签 span
同样具有间隙问题，解决方法与inline-block一致
水平居中：给父级设置text-align：center

总结CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>总结CSS</title>
</head>

<body>
    <h2>总结CSS</h2>
    <p>
        Cascading Style Sheets层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）
        或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。<br />
        为什么使用CSS<br />
        简化html文档<br />
        提高html代码维护性及展示性
    </p>
    <h3>CSS引入的三种方式</h3>
    <p>
        行内样式<br />
        通过style标签嵌入<br />
        通过link标签引入，注意关于@import<br />
    </p>
    <h4>行内样式</h4>
    <div style="color:red">显示内容</div>
    <h4>通过style标签嵌入</h4>
    <div style="color:red" class="div1">显示内容</div>
    <style>
        .div1 {
            /*行内样式 > 嵌入样式*/
            color: blue;
            background-color: yellow;
        }
    </style>
    <h4>引入样式文件</h4>
    <p>
        样式是一个后缀为.css的独立文件，可以在不同的html页面文件中进行引入，以达到统一显示风格的目的。<br />
        <!--
            语法规则:
        <link href="CSSurl路径" rel="stylesheet" type="text/css" />
        例如：<link rel="stylesheet" href="http://www.yan.com/style.css" >
            优化手段CDN

        <style type="text/css">
        @import url(CSS文件路径地址);
        </style>
            例如
            <style>
            @import url(http://www.yan.com/style.css)
        </style>
        -->
    </p>
    <h4>link和import的区别</h4>
    <p class="p1">
        首页link和import语法结构不同，前者<link>是html标签，
        只能放入html源代码中使用，后者可看作为css样式，作用是
        引入css样式功能。import在html使用时候需要style type
        ="text/css"标签，同时可以直接“@import url(CSS文件路
        径地址);”放入css文件或css代码里引入其它css文件。

        本质上两者使用选择区别不大，但为了软件中编辑布局网页html
        代码，一般使用link较多，也推荐使用link。            
    </p>
    <!--
        <link href="css/style.css" rel="stylesheet" type="text/css">
    -->
    <style>
        @import url('css/style1.css');
    </style>
    <h3>css样式表的优先级[重点]</h3>
    <p>
        <ul>基本规则：<b>就近原则</b>
            <li>最近的祖先样式比其他祖先样式优先级高</li>
            <li>"直接样式"比"祖先样式"优先级高</li>
            <li>内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器【常见的7种选择器】</li>
        </ul>

- 
- 
- 属性后插有 !important 的属性拥有最高优先级

    </p>
    <div style="color:blur">
        <div style="color:red">
            <div bbb class="ccc">
                123
            </div>
        </div>
    </div>
    <style>
        [bbb]{
            color:brown;
        }
        .ccc{
            color:chocolate;
        }
    </style>
</body>

</html>