Web初识之CSS篇

喜欢ヅ旅行 2022-07-21 01:54 127阅读 0赞

**CSS进阶**

**CSS**：层叠样式表（Cascading Style Sheets）,主要用于定义HTML内容在浏览器内的显示样式；

例如：

p{
     	font-size:12px;   /*设置文本格式为12px*/
     	color: red;
    	font-weight:bold;
    }

<p>文本</p>
     
    span{
         color:red;
        }

解析：（选择符、声明、属性、值）

p：选择符；

\{\}：声明；

color：属性；

red：值；

实例：

<!DOCTYPE HTML>
    <html>
    <head>
    <metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
     
    <span style="white-space:pre">	</span><title>CSS代码语法</title>
    <span style="white-space:pre">	</span><style type="text/css">
    <span style="white-space:pre">	</span>p{
      <span style="white-space:pre">	</span> font-size:12px;
       <span style="white-space:pre">	</span>color:red;
       <span style="white-space:pre">	</span>font-weight:bold;
    <span style="white-space:pre">	</span>}
    <span style="white-space:pre">	</span></style>
    <span style="white-space:pre">	</span></head>
    <body>
    <span style="white-space:pre">	</span><p>我是高手</p>
    </body>
    </html>
     
    Css根据代码插入形式可以将其分为三种：<strong>内联式、嵌入式</strong>和<strong>外部式</strong>；
    内联式：将css样式直接写在html标签中：<p style=”color:red”> 文本</p>
    嵌入式：将css样式写在<style type=”text/css”></style>标签之间，上面已经讲过；
    外部式：将css代码写在一个单独的外部文件中，扩展名为“.css”，在html文件中要在<head></head>标签内使用<link>标签将css样式文件连接到html文件，如下所示：
    <head>
    <title>外联式</title>
    <link href=”base.css”rel=”stylesheet” type=”text/css”/>
    </head>

**优先级：内联式>嵌入式>外部式**

原则：就近原则；

**css选择式**

1.标签选择器

2.类选择器

语法： .类选择器名称\{ css样式代码；\}

以圆点开头，类选择器名称可以自由取名（不能是中文）

如下实例：

3.ID选择器

语法：

#id名称{css样式代码}
    <style type="text/css">
    #stress{font-size:18px;color:blue}
    </style>
    <span id=”stress”>标记文本</span>

由以上可知，ID选择器和类选择器很相似；但是二者也有不同之处,ID选择器只能使用一次，类选择器可以多次使用；

4.子选择器

>用于指定标签元素的第一代子元素；

.food>li<border:1px solid red;>

5.包含（后代）选择器

.foodspan\{color: red\}

空格隔开样式作用于所有的后代；

6.通用选择器

通用选择器用（\*）来指定，匹配html页面中所有的标签元素；

* {
        color:red;
        font-size:20px;
    }

7.伪类选择符

伪类选择符是给html中不存在的标签设置样式，比如：当鼠标滑过某些文本，改变文本的状态，滑过后恢复为原来的状态；（一般用来给连接文本设置改变状态）

a:hover{
        color:red;
        font-size:20px;
    }

8.分组选择符

当多个标签拥有听一个样式时候，可以使用分组选择符，逗号，用逗号隔开标签名：

h1,span\{font-size:20px;color:red;\}

对类选择符和ID选择符进行

.first,\#second span\{color:green;\}

**CSS继承、层叠和特殊性**

继承

有的标签具有继承性，有的标签没有：

如：p\{color:red\}具有继承性；

全部文本变成红色；

p\{border:1px solid red\}没有继承性

只作用于最外层；

**特殊性**

不同的css样式代码有不同的优先级，不同的样式作用在同一目标上，浏览器是根据css 样式的权值来选择使用哪种样式；

标签权值：1；类选择符权值：10；ID选择符的权值最高，为100；

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

**层叠**

当同一目标的多重作用样式有相同权重的时候，按照就近原则显示样式；

p{color:red;}
    p{color:green;}
    p{color:pink;}

上面的三个标签只会显示最后一个；

重要性

利用！important来解决，可以给样式设置为最高权值；

p\{color:red !important;\}

**格式化排版**

文字排版：

设置字体：body\{font-family:”MicrosoftYahei”;\}

字号、颜色： .stress\{font-size:20px;color:purple;\}

粗体：pspan{font-weight:bold;}
    斜体：p a{font-style:italic;}
    下划线：p a{text-decoration:underline;}
    删除线：.oldPrice{text-decoration:line-through;}

**段落排版**

段落缩进p\{text-indent:2em;\}

行间距：p\{line-height:1.5em;\}

中文字间距、字母间距：h1\{letter-spacing:20px;\}

段落对齐：div\{ text-align:center/left/right;\}

**CSS盒模型**

Html中标签元素大体被分为三种不同类型：块状元素、内联元素、内联块状元素；

常见的块状元素有：<div><p> <h1>……<h6> <ol> <ul> <dl> <table><address> <blockquote> <form>

常见的内联元素(不可设置长宽高)有：<a> <span> <br><i> <em> <strong> <label> <q> <var><cite> <code>

常用的内联块状元素（可以设置长宽高）：<img> <imput>

内联元素设置为块状元素a\{display:block;\}

块状元素设置为内联元素div\{display:inline;\}

div{
       display:inline;
       background:purple;
    }
    em{
           background:pink;
     }

<div>我变成了内联 <em>我成内联了</em> </div>

div{
       background:purple;
    }
    em{
           background:pink;
     }

<div>我div还是块状<em>我成内联了</em> </div>

将内联元素设置为内联块状元素：

a{
       display:inline-block;
           width:20px;/*在默认情况下宽度不起作用*/
           height:20px;/*在默认情况下高度不起作用*/
           background:pink;/*设置背景颜色为粉色*/
           text-align:center;/*设置文本居中显示*/
    }

盒子-内填充-内容-外边距

**盒模型-边框：**

div\{border:2px solid red;\}

或者

div{
     border-width:2px/thin/medium/thick;
    border-style:solid/dashed/dotted;
    border-color:red;
    }

**单独为边框的某一个边设置属性：**

div{
     border-bottom:1px dotted #ccc; 
     border-top:1px solid black;
     border-right:1px solid red;
      - -border-left:1pxsolid orange;
    }

<div>我四个边框属性不一样，还可以一边没有变宽</div>

**宽高设置**

**![Center][]**

li{
       margin:10px;
       border-bottom:1px dotted black;
       border-left:2px dotted red;
       width:205px;
       height:30px;
       padding:7px;
    }
    <ul>
       <li>第一名</li>
       <li>第二名、第二名</li>
       <li>第三名、第三名、第三名</li>
    </ul>

![Center 1][]

其中margin/border/padding是按照顺时针上右下左的顺序设置的；

**填充：**

div{padding:20px 10px 15px 30px;}

或者

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}

**边界：**

div{margin:20px 10px 15px 30px;}

或者

div{

margin-top:20px;

margin-right:10px;

margin-bottom:15px;

margin-left:30px;

}

**CSS布局**

网页元素的三种布局模型：

流动模型（Flow）

浮动模型（Float）

层模型（Layer）

***流动模型***

Flow模型是默认的网页布局

1. 流动模式下的块状元素会在所处的元素内自伤而下按照顺序水质延伸分布，通常以行的形式占据位置；

2. 流动模式下的内联元素都会在所处的元素自左向右水平部分显示。

***浮动模型***

任何元素在默认情况下是不能浮动的；

如果想让块状元素并排显示，可以两个状况元素设置成浮动型的；

div{

width:200px;

height:200px;

border:2px red solid;

float:left;

}

上述显示两个div方框并排靠左显示；

div{

width:200px;

height:200px;

border:2px red solid;

}

#div1{float:left;}

#div2{float:right;}

上述显示的两个div一个靠左显示，一个靠右显示

![SouthEast][]

层模型

层模型的三种形式：

绝对定位（position:absolute）

相对定位（position:relative）

固定定位（position:fixed）

绝对定位：

div\{

width:200px;

height:200px;

border:2pxred solid;

position:absolute;

right:100px;

top:20px;

\--向左定位100px，向下定位20px;

其他内容是根据div变化而变化，相对变化；

固定定位

固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响；与absolute定位类型类似，但它的相对移动的坐标是视图（**屏幕内的网页窗口**）本身

#div1{
       width:200px;
       height:200px;
           border:2pxred solid;
           position:fixed;
       bottom:0;
       right:0;
    }

绝对定位和相对定位的混合使用：

#box3{
       width:200px;
       height:200px;
       position:relative;
    }
    #box4{
       bottom:0px;
       position:absolute;  
    }

这样展示的效果是box4相对于box3进行了绝对定位，在box3内部靠底部的地方；

CSS代码缩写

盒模型缩写：

p{
       padding:13px;
       margin:10px 40px ;
    }
    等价于
    p{
       padding:13px 13px 13px 13px;
       margin:10px 40px 10px 40px;
    }

颜色缩写：

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;

}

这么多行的代码其实可以缩写为一句：

body{

font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;

}

常见的：body{

font:12px/1.5em  "宋体",sans-serif;

}

CSS单位与值、

设置颜色：

1.英文命令的颜色

p{color:red;} 2.RGB颜色 p{color:rgb(133,45,200);} --数值在0-255之间 p{color:rgb(20%,33%,25%);} 3. 十六进制颜色 p{color:#00ffff;}

![SouthEast 1][]

长度值：

1.像素px

相对单位，根据显示器上的小点；

2.em

本元素给定字体font-size值，如果元素的font-size为10px，则1em=10px;

但当给 font-size设置单位为em时，此时计算的标准以 p 的父元素的 font-size为基础。

css:
    p{font-size:14px}
    span{font-size:0.8em;}

p{font-size:12px;line-height:130%}

CSS样式设置小技巧

在父容器中水平居中：

当为块元素的时候，分定宽块状元素和不定宽块状元素；

定宽块状元素：需要通过设置width:500px和margin:20px auto(左右为auto),样式设置见以上代码；

不定宽块状元素

有时候需要显示的东西是不定宽的，我们不能设置定宽来限制动态显示的东西，限制了它的弹性；

三种方法居中：

1. 加入table标签。

为需要设置居中的元素外面加入table标签，为table标签设置“左右margin居中”

table{
       margin:0 auto;
       border:1px solid;
    }
    .wrap{
       background:#ccc;
    }

\-------------------------------

<div class="wrap">
    <table>
    <tr>
       <td>
            设置我所在的div容器水平居中
       </td>
    </tr>

![SouthEast 2][]

2. 改变会计元素的display为inline类型，然后使用text-align:center来实现居中效果；

![SouthEast 3][]

3. 给父元素设置float,然后设置position：relative和left:50%，给子元素设置position：relative和left:-50%，可实现水平居中；

.wrap{
       float:left;
       position:relative;
           left:50%
    }
    .wrap-center{
       background:#ccc;
       
       position:relative;
       left:-50%;
    }
    <div class="wrap">
        <div class="wrap-center">我们来学习一下这种方法。</div>
    </div>
     
    垂直居中—父元素高度确定的单行文本
    设置height和line-height高度一致来实现；
    .wrap h2{
       margin:0;
        height:100px;
        line-height:100px;
       
       background:#ccc;
       text-align:center;
    }

父元素高度确定多行文本

方法一：使用table标签

Css代码：

table td{height:500px;background:#ccc}

html代码：

<body>

<div>

<p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

</body>

再如：

方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式

隐性改变display类型：

为元素设置position:absolute或者float:left/right;

.container a{
      position:absolute;
      float:right;
           width:200px;
           background:#ccc;
    }

[Center]: /images/20220720/02d05ea8b1824e399040cda1f17bf0fd.png
[Center 1]: /images/20220720/f9a825bb00f64089ac9b5219700a2cd6.png
[SouthEast]: /images/20220720/419e554b8eb5401cb4229999404040bd.png
[SouthEast 1]: /images/20220720/8569785211a64eb7b581da98b5981895.png
[SouthEast 2]: /images/20220720/de4163d6de5d4edbbd6c7e0a39a4cf90.png
[SouthEast 3]: /images/20220720/7f967a87f5354a58b756c21ab18a993b.png