小白web前端开发--学习笔记三

来源：互联网发布：本周国内经济数据编辑：程序博客网时间：2024/06/05 02:23

css基础知识

css简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

要深刻理解层叠样式表，样式表说明css是负责美化网页的；而层叠表示网页可以定义多层样式，样式可以被覆盖而不会被干掉。

css样式的3种用法

在标签中使用style属性,如下：
<h1 style="color:red;">Hello,World</h1>
在头部的style标签中定义：
<style> p { color: blue; } </style>
在头部通过link标签引用外部css文件，如：
<link rel="stylesheet" href="01.css">

css的3种基础选择器

1. html选择器

用法：在style属性中直接利用标签进行设置，如下：

p {    color: red;}

需要注意的点：

通过html标签名来选择元素

所有的html标签都可以当做选择器
无论标签藏多深都会被选中
选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。

2. . class选择器

用法：对标签的class名进行设定。

.class{    color:blue;}

需要注意的点：

1.任何的标签都可以使用class属性(class属性也是一个全局属性)

2.class属性名可以重复使用

3.一个class属性中，可以有多个class属性值。

3. id选择器

用法：利用标签的id属性进行设定：

#id{    color:blue;}

需要注意的点：

任何的标签都可以有id属性和属性值(因为id是一个全局属性)。id命名不能随意的命名。
大小写敏感，id的名字中可以有数字字母下划线，但是要以字母开头。
驼峰命名法分为小驼峰命名和大驼峰命名。
testHeader是小驼峰，TestHeader是大驼峰，或test-header也行
id名不能重复，id名是唯一的。

综合选择器

后代选择器

如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        /*后代选择器，选中所有的后代的span标签*/        .d1 span {            color: blue;        }    </style></head><body>    <div class="d1">        <span>我是儿子span</span>        <div class="son">            <span>我是孙子span</span>            <div class="d2">                <span>我是重孙span</span>            </div>        </div>    </div></body></html>

设定div标签的所有p标签为红色。

交集选择器

例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        /*选中div，并且这个div的class名叫d1*/        div.d1 {            color: red;        }    </style></head><body>    <div class="d1">我是第一个div</div>    <div class="d1">我是第二个div</div></body></html>

选中div标签中有特定名字的div标签

并集选择器

例：

<html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .d1,p,em {            color: red;        }    </style></head><body>    <div class="d1">我是div标签</div>    <em>我是em标签</em>    <p>我是p标签</p></body></html>

选定需要设置相同样式的所有标签

子元素选择器

例：

<html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        #fa>em {            color: red;        }    </style></head><body>    <div id="fa">        <em>我是二级em</em>        <div class="son">            <em>我是三级em</em>            <div>                <em>我是四级em</em>            </div>        </div>    </div></body></html>

序列选择器

例：

<!DOCTYPE html><html lang="en"><head>    meta charset="UTF-8">    title>Document</title>    <style>        ul li:first-child {            color: red;        }        ul li:last-child {            color: blue;        }    </style></head><body>    <ul>        <li>li1</li>        <li>li2</li>        <li>li3</li>        <li>li4</li>        <li>li5</li>    </ul></body></html>

相邻兄弟选择器和普通兄弟选择器

例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    /*相邻兄弟选择器*/        div + p {            color: red;        }    /*普通兄弟选择器*/        div ~ p {            color: red;        }    </style></head><body>    <div>我是div</div>    <p>我是p标签</p>    <p>我是第二个p标签</p></body></html>

继承和层叠

.继承：父元素的某些css属性会被子元素无条件的继承过去。
关于文字的css属性都可以进行继承，如color，text-，line-，font-等
层叠：层叠解决的是css冲突的问题。
比较权重来解决层叠问题。
!important 能够把”单独属性”的权重变为无限大。尽量少用。

选择器冲突

html选择器，class选择器，id选择器的权重是id>class>html。因此单个的这3中选择器发生冲突时以id属性定义的样式为准。如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    /*谁更精确就听谁的*/        div {            color: blue;        }        #test {            color: green;        }        .d1 {            color: red;        }    </style></head><body>    <div class="d1" id="test">我是div标签</div></body></html>

此时显现的颜色为green。

当这3种选择器的数量不一样，则将id,class,html这3种选择器的数量依次进行比较，权重大者获胜。如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    /*id  class html选择器的权重比较*/        #box1 .hei2 p {  /* 1   1   1*/            color: red;        }        div div #box3 p {  /*1  0  3*/             color: green;        }        div.he1 div.he2 div.he3 p { /*0 3 4 */             color: blue;        }    </style></head><body>    <div class="he1" id="box1">        <div class="he2" id="box2">            <div class="he3" id="box3">                <p>文字颜色</p>            </div>        </div>    </div></body></html>

经过权重比较后，文字颜色为red。

若权重相同，则采用覆盖原理，写在后面的样式会覆盖前面的样式。
如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        /*两种样式的权重一样，后面的会覆盖前面的*/        #box1 .he2 p {            color: red;        }        #box2 .he3 p {            color: blue;        }    </style></head><body>    <div class="he1" id="box1">        <div class="he2" id="box2">            <div class="he3" id="box3">                <p>文字颜色</p>            </div>        </div>    </div></body></html>

此时文字颜色为blue。

若选择器没有直接选中，则谁描述的详细谁获胜，如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        #he3 {            color: blue;        }        #he1 #he2 {            color: red;        }    </style></head><body>    <div class="box" id="he1">        <div class="box" id="he2">            <div class="box" id="he3">                <p>猜猜这是什么颜色?</p>            </div>        </div>    </div></body></html>

此时虽然#he1 #he2的权重大于#he3，但#he3描述的更详细。因此文本颜色为blue。

综上:选择器的选择问题可以用下图表示：

权重比较

块级元素和行内元素

行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。
块级元素会独占一行。而行内元素却不能够独占一行，只能和其他的行内元素共用一行。
如果块级元素不设置宽度，那么块级元素会自动的占满父元素的全部宽度。
常用的块级元素有div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl。常用的行内元素有span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code。

行内元素和块级元素之间的转换

行转块–>block
块转行–>inline

行内块元素–>inlin-block
如下代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .d0 {            width: 300px;            height: 300px;            background-color: red; /*背景颜色*/            display: inline; /*把块级元素变成了行内元素*/         }        .s1 {            width: 300px;            height: 300px;            background-color: blue;            display: block;/*将行内元素变成块级元素*/        }        em {            width: 300px;            height: 300px;            background-color: green;            display: inline-block; /*行内块元素*/        }        .d1 {            width: 300px;            height: 300px;            background-color: red;            display: inline-block;            /*float: left;浮动*/        }        .d2 {            width: 300px;            height: 300px;            background-color: blue;            display: inline-block;            /*float: left;*/        }        body {            background-color: #000;        }    </style></head><body>    <div class="d0">Hello,Div</div>    <span class="s1">hello,Span</span>    <em>hello,Em</em>       <a href="##">百度</a>    <hr>    <div class="d1"></div>     <div class="d2"></div></body></html>

阅读全文

0 0