首页 > 代码库 > CSS-学习笔记二

CSS-学习笔记二

2024-08-25 23:05:39   221人阅读

1. table标签中的标题

caption {
    caption-side: top;
}

 

2.table标签中边框重合

table {
    width: 300px;
    height: 200px;
    border-collapse: collapse; /*边框可以重合*/
}

 

3. table表中的项居中

th, td {
    border: solid 2px red;
    text-align: center;
}

 

4. 列表头和行表头

    <!--默认列表头 scope="col"-->
    <table >
        <caption >学生信息表</caption>
        <tr><th>姓名</th><th>学号</th><th>性别</th></tr>
        <tr><td>张三</td><td>001</td><td>男</td></tr>
        <tr><td>李四</td><td>002</td><td>男</td></tr>
        <tr><td>王五</td><td>003</td><td>女</td></tr>
        <tr><td>赵六</td><td>004</td><td>女</td></tr>
    </table>

    <!--横表头-->
    <table >
        <caption >学生信息表</caption>
        <tr><th scope="row">姓名</th><td>张三</td><td>男</td></tr>
        <tr><th scope="row">学号</th><td>李四</td><td>男</td></tr>
        <tr><th scope="row">性别</th><td>王五</td><td>女</td></tr>
    </table>

 

5. 按钮和文本框的边框，不显示或者只显示下划线

.btn {
    border-width: 0px;
}

.txt {
    border-width: 0px;
    border-bottom: solid 2px black;
}

 

6. 去掉超链接的下划线

a {
    text-decoration: none;
}

 

7. 设定鼠标的显示形状

p {
    cursor: pointer;
}

 

8. 无序列表，更改无序编号样式

ul {
    list-style-type: none;
}

 

9. 块级元素和行内元素

   内联元素，行内元素：1. width和height不起作用 2.不会占满一行

   内联元素包含：span input a label img textarea select等    行内元素用来做内容

  块级元素：1. 设置width,height 2. 块级元素里面的内容，默认显示在块的左上角 3. 块级元素单独占满一行

  块级元素包含：div p h1-h6 (ol li) (ul li) (dl dt dd) table pre form等    块级元素用来做布局

<span>1</span><span>2</span>
span {
    /*width :100px;  不起作用*/
    /*height :100px;不起作用*/
    /*border :solid 1px red;*/
    /*display :block 行内元素转化为块级元素*/
    /*display :inline-block ; 即有行内元素特点又有块级元素的特点*/
}

 

对于块级元素的两个重要CSS属性：float和clear

<div class="c1">块元素1</div><div class="c1">块元素2</div><div class="c2">块元素3</div><div class="c3">块元素4</div>
.c1 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    /*display :inline   块级元素转化为行内元素*/
    float: left; /*浮动，靠左对齐*/
}

.c2 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    clear: left; /*因为受到前面块级元素float的影响，必须先清空下前面的格式*/
    float: right;
}

.c3 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    float: right;
}

 

10. 盒子模型 padding margin

<div id="d1">盒子模型 内间距</div>
<div id="d2">盒子模型 外间距 1</div><div id="d3">盒子模型 外间距 2</div>
#d1 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    clear: both;
    /*padding :10px;  上下左右都撑开10px*/
    /*padding :10px 20px 上下分别撑开10px,左右分别撑开20px*/
    /*padding :10px 15px 40px; 上面撑开10px,左右撑开15px,下面撑开40px*/
    /*padding :10px 15px 20px 25px 顺时针，上10，右15，下20，左25*/
    padding-top: 20px;
    padding-left: 15px;
}

#d2, #d3 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    float :left ;
}
#d3 {
    /*margin :20px;  这个用法和padding一样*/
    margin-left :20px;
}

 

11.所有的元素都顶住浏览器的边框

*{
    padding :0px;
    margin :0px;
}

 

12. 在google浏览器中调试，右键-Inspect

    <div id="d4">
        <ul >
            <li>盒子模型调试</li>
            <li>盒子模型调试</li>
            <li>盒子模型调试</li>
        </ul>
    </div>
#d4{
    width: 200px;
    height: 100px;
    border: solid 1px red;
    clear :both ;
    margin :0px auto; /*代表上下是0，左右自动平分，这样就居中了*/
}
#d4 ul{
    width: 120px;
    height: 60px;
    margin :0px auto ; /*默认是div的宽度，先丈量下大小，修改高度和宽度*/
}

 

13. padding和Magin对行内元素一样有作用

    <div>
        <span id="d5"> padding和Magin对行内元素</span> <span id="d6"> padding和Magin对行内元素</span>
    </div>
#d5,#d6{
        border: solid 1px red;
        padding :20px;
        margin :50px;
}

 

看代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="http://www.mamicode.com/CSS/demo.css" rel="stylesheet" />
</head>
<body>

    <!--默认列表头 scope="col"-->
    <table >
        <caption >学生信息表</caption>
        <tr><th>姓名</th><th>学号</th><th>性别</th></tr>
        <tr><td>张三</td><td>001</td><td>男</td></tr>
        <tr><td>李四</td><td>002</td><td>男</td></tr>
        <tr><td>王五</td><td>003</td><td>女</td></tr>
        <tr><td>赵六</td><td>004</td><td>女</td></tr>
    </table>

    <!--横表头-->
    <table >
        <caption >学生信息表</caption>
        <tr><th scope="row">姓名</th><td>张三</td><td>男</td></tr>
        <tr><th scope="row">学号</th><td>李四</td><td>男</td></tr>
        <tr><th scope="row">性别</th><td>王五</td><td>女</td></tr>
    </table>

    <!--按钮，文本框的边框-->
    <input type="button" value="http://www.mamicode.com/我是一个按钮" class="btn"/>
    <input type="text" class="txt"/>

    <!--去掉超链接的下划线-->
    <a href="http://www.baidu.com" target="_blank">百度</a>

    <!--设定鼠标的形状-->
    <p>鼠标形状</p>

    <ul>
        <li>1111</li>
        <li>3333</li>
        <li>5555</li>
    </ul>

    <!--内联元素，行内元素：1. width和height不起作用 2.不会占满一行
        内联元素包含：span input a label img textarea select   行内元素用来做内容-->
    <span>1</span><span>2</span>
    <br/>
    <br />
    <!--块级元素：1. 设置width,height   2. 块级元素里面的内容，默认显示在块的左上角  3. 块级元素单独占满一行
    有哪些块级元素：div p h1-h6 (ol li) (ul li) (dl dt dd) table pre form    块级元素用来做布局-->
    <div class="c1">块元素1</div><div class="c1">块元素2</div><div class="c2">块元素3</div><div class="c3">块元素4</div>
    <br />
    <br />
    <!--盒子模型-->
    <div id="d1">盒子模型 内间距</div>
    <div id="d2">盒子模型 外间距 1</div><div id="d3">盒子模型 外间距 2</div>

    <!--在google浏览器中调试-->
    <div id="d4">
        <ul >
            <li>盒子模型调试</li>
            <li>盒子模型调试</li>
            <li>盒子模型调试</li>
        </ul>
    </div>

    <!--padding和Magin对行内元素一样有作用-->
    <div>
        <span id="d5"> padding和Magin对行内元素</span> <span id="d6"> padding和Magin对行内元素</span>
    </div>
</body>
</html>
body {
    font-size: 20px;
    font-family: "微软雅黑";
}

caption {
    caption-side: top;
}

table {
    width: 300px;
    height: 200px;
    border-collapse: collapse; /*边框可以重合*/
}

th, td {
    border: solid 2px red;
    text-align: center;
}

.btn {
    border-width: 0px;
}

.txt {
    border-width: 0px;
    border-bottom: solid 2px black;
}

a {
    text-decoration: none;
}

p {
    cursor: pointer;
}

ul {
    list-style-type: none;
}

span {
    /*width :100px;  不起作用*/
    /*height :100px;不起作用*/
    /*border :solid 1px red;*/
    /*display :block 行内元素转化为块级元素*/
    /*display :inline-block ; 即有行内元素特点又有块级元素的特点*/
}

.c1 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    /*display :inline   块级元素转化为行内元素*/
    float: left; /*浮动，靠左对齐*/
}

.c2 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    clear: left; /*因为受到前面块级元素float的影响，必须先清空下前面的格式*/
    float: right;
}

.c3 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    float: right;
}

#d1 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    clear: both;
    /*padding :10px;  上下左右都撑开10px*/
    /*padding :10px 20px 上下分别撑开10px,左右分别撑开20px*/
    /*padding :10px 15px 40px; 上面撑开10px,左右撑开15px,下面撑开40px*/
    /*padding :10px 15px 20px 25px 顺时针，上10，右15，下20，左25*/
    padding-top: 20px;
    padding-left: 15px;
}

#d2, #d3 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    float :left ;
}
#d3 {
    /*margin :20px;  这个用法和padding一样*/
    margin-left :20px;
}

/*所有的元素都顶住浏览器的边框*/
*{
    padding :0px;
    margin :0px;
}

#d4{
    width: 200px;
    height: 100px;
    border: solid 1px red;
    clear :both ;
    margin :0px auto; /*代表上下是0，左右自动平分，这样就居中了*/
}
#d4 ul{
    width: 120px;
    height: 60px;
    margin :0px auto ; /*默认是div的宽度，先丈量下大小，修改高度和宽度*/
}
#d5,#d6{
        border: solid 1px red;
        padding :20px;
        margin :50px;
}

 

CSS-学习笔记二


联系
我们