腾讯前端十天小白训练营<DAY 3>---css常用属性及行内&块级元素

来源：互联网发布：贪玩游戏知乎编辑：程序博客网时间：2024/05/21 04:44

超链接

love hate 原则：按先后顺序才能正确显示

l link 表示开始时的状态
v visited 表示访问之后的状态
h hover 表示鼠标移上去时的状态
a active 表示鼠标点击链接时的状态

a:link      {color:blue;font-size:36px;}a:visited   {color:pink;}a:hover     {color:red;}a:active    {color:green;}

table

表格的表头使用 th 标签进行定义;
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 开始（table data）
在一些浏览器中，没有内容的表格单元显示得不太好,如果某个单元格是空的（没有内容），在空单元格中添加一个空格占位符  就可以将边框显示出来；

细线合并

以下是源代码

<html><head><link href="Untitled-2.css" type="text/css" rel="stylesheet" /></head><body><table>    <tr><th>name</th><th>age</th><th>sex</th><th>number</th></tr>    <tr><td>Amma</td><td>20</td><td>m</td><td>01</td>     <tr><td>Amma</td><td>20</td><td>m</td><td>01</td>      <tr><td>Amma</td><td>20</td><td>m</td><td>01</td>       <tr><td>Amma</td><td>20</td><td>m</td><td>01</td></body></html>

以下是css部分

未使用细线合并：

table{    width:500px;    heigh:400px;}th,td{    border:solid 2px red;}

这里写图片描述

使用细线合并：

table{    width:500px;    heigh:400px;    border-collapse:collapse;/*细线合并*/}th,td{    border:solid 2px red;         text-align:center;}

这里写图片描述

边框

solid : 实线
dotted : 虚线
dashed : 圆点

border:solid 5px red;

相当于

border-style:solid;border-width:5px;border-color:red;

背景

插入背景图片的源代码如下

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="Untitled-2.css" type="text/css" rel="stylesheet" /></head><body><div id="d1">hello</div></body></html>

css部分如下：

#d1{    width:600px;    height:200px;    border:solid 3px red;    background-image:url(%E6%97%A0%E6%A0%87%E9%A2%98.png);    background-repeat:no-repeat;    /*repeat-x:横向  ； repeat-y:纵向  no-repeat:不重复 */    background-color:pink;    background-position:50px 50px;    /*第一个值是距离父容器左边的间距，第二个是距离父容器上面的间距*/}

这里写图片描述

固定背景图片的源代码如下：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="Untitled-2.css" type="text/css" rel="stylesheet" /></head><body><div id="d1">hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ? are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ? are you ?hello hore you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ? are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?o how are you ?helyou ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello how are you ?hello holo how are you ?hello how are you llo how are you ?hello how are you ?hello how are you ?</div></body></html>

css部分如下：

#d1{    width:600px;    height:200px;    border:solid 3px red;}body{    background-image:url(1.png);    background-repeat:no-repeat;    background-attachment:fixed;    /*用于固定图片：当文字超出图片范围出现滚动条时，拖动滚动条，背景图片不动*/}

这里写图片描述

background 属性可以合成一句话：

background:blue url("xxx.jpg") no-repeat fixed 10px 20px;

滚动条

#d1{    width:600px;    height:200px;    border:solid 3px red;    overflow:auto;/* auto:     内容超出时有滚动条，否则没有；    hidden:  超出部分自动隐藏；    scroll:  不管是否超出，总有滚动条;*/`}

隐藏块

源代码如下

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="Untitled-2.css" type="text/css" rel="stylesheet" /></head><body><div class="c c1"></div><div class="c c2"></div></body><html>

css文件

.c{    width:600px;    height:200px;    border:solid 3px red;}

这里写图片描述

加上隐藏div(块）的代码如下

不占位隐藏：

.c1{    display:none;    /*不占位隐藏*/}

这里写图片描述

占位隐藏:

.c1{    visibility:hidden;    /*占位隐藏*/}

这里写图片描述

z-index：控制块的层级

默认情况下，最下面的div显示在最上面一层，最上面的显示在最下面一层

添加 z-index属性后，z-index的值越大就在越上面

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="Untitled-2.css" type="text/css" rel="stylesheet" /></head><body><div class="c c1"></div><div class="c c2"></div><div class="c c3"></div></body></html>

.c{    width:100px;    height:100px;    border:solid 2px red;    position:absolute;    /*使三个块级元素合在一起，而不是单独占行*/}

这里写图片描述

div是块级元素，会单独占行。如果不添加 position:absolute; 则显示如下：

这里写图片描述

未添加zindex属性：

.c{    width:100px;    height:100px;    border:solid 2px red;    position:absolute;}.c1{    background-color:pink;    top:50px;    left:50px;}.c2{    background-color:#0F9;    left:80px;    top:80px;}.c3{    background-color:#FF0;    left:100px;    top:100px;}

这里写图片描述

在以上代码的 .c1 中加入z-index 属性：

.c1{    background-color:pink;    top:50px;    left:50px;    z-index:3;}

这里写图片描述

鼠标样式

通过cursor标签设置鼠标放在文字上的样式

<html><head><link href="Untitled-2.css" type="text/css" rel="stylesheet" /></head><body><p>hello</p></body></html>

p{    cursor:pointer; }

cursor:pointer; 显示手的形状,和点击超链接时的一样

cursor:help; 显示问号

cursor:wait; 显示正在加载的圆形符号

列表

<html><head><link href="Untitled-2.css" type="text/css" rel="stylesheet" /></head><body><ul>    <li>dljfljsalfjk</li>    <li>dljfljsalfjk</li>    <li>dljfljsalfjk</li>    <li>dljfljsalfjk</li> </ul></body></html>

这里写图片描述

通过css属性设置列表前面的图案：

circle:空心圆；
disc:实心圆；
none:无图案；

li{    list-style-type:circle;/*空心圆*/}

这里写图片描述

li{    list-style-image:url(%E6%97%A0%E6%A0%87%E9%A2%98.png)}

这里写图片描述

文字垂直居中属性

默认情况下：

<html><head><link href="Untitled-2.css" type="text/css" rel="stylesheet" /></head><body><p>l;jaljlaj;fsak<img src="1.png" />ljalgjlkgreg</p></body></html>

这里写图片描述

设置css标签：

img{    vertical-align:middle;}

这里写图片描述

文字置顶 (和图片顶部对齐），则为：vertical-align:text-top;
置底：vertical-align:text-bottom;

块级元素和行内元素

特点：

这里写图片描述

<html><head><link href="Untitled-2.css" type="text/css" rel="stylesheet" /></head><body><div>hello</div><div>hello</div><span>hello</span><span>hello</span></body></html>

div{    width:100px;    height:100px;    border:solid 2px red;}span{    width:100px;    height:100px;    border:solid 2px red;}

这里写图片描述

两种元素之间的转化：

块级元素->行内元素：

display:inline;

行内元素->块级元素：

display:block;

div{    width:100px;    height:100px;    border:solid 2px red;    display:inline;}span{    width:100px;    height:100px;    border:solid 2px red;    display:block;}

这里写图片描述

若display为：

display:inline-block;

则既有行内元素的特点（默认情况，不单独占行），又有块级元素的特点（文字默认显示在左上角；受height,width影响）

div { width:100px; height:100px; border:solid 2px red; display:inline; } span { width:100px; height:100px; border:solid 2px red; display:inline-block; } 这里写图片描述

阅读全文

0 0