前端学习-基础部分-css（一）

开始今日份整理

1.CSS的导入方式

CSS的导入方式主要是有内联模式，行内模式，外部样式表

1.1 内联模式

内联模式：直接在<head>中直接写css，例如

p{

        color:rgb(166, 226, 226);

    }

#设置P标签的颜色

1.2 行内模式

行内模式：在html中对应元素直接书写

<p style="color:cadetblue">第一段 世界大势，合久必分，分久必合</p>

1.3 外部样式表

外部样式表，主要是有俩种，一种为链接式，一种为外联样式表

<link rel="stylesheet" href="index.css">

<!-- CSS2.1的样式 -->

@import.url()

俩者的区别如下

一个是全部导入后，才开始编译，包括css，<link>方式
一个是先导入html进行编译，然后在将css文件加载到网页中 <@import>方式

2.CSS选择器

css的选择器主要分基本选择器以及高级选择器

2.1 基本选择器

通用元素选择器 *: 匹配任意元素，一般用于清楚网页的默认样式
标签选择器：匹配所有指定标签的样式，不管样式有多深，都可以匹配，选中既所有，并不是单一的一个
id选择器：根据指定的id匹配标签，id在网页中全局唯一，一般留给后面js中调用，获取到标签
class类选择器：根据指定的class匹配标签

注：一定要有公共类的概念，不要试图用一个类完整一个网页，尽量把类拆分出来，每个类尽量的小，让更多的标签去使用，同一个标签可以携带多个类，类与类之间用空格隔开即可。

基本应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>基础选择器</title>

    <style>

        /*标签选择器*/

        body{

            background: #b6bbb2;

        }

        div{

            background: #747F8C;

            color: red;

        }

        /*id选择器*/

        #h1{

            color: #501c56;

        }

        /*class选择器*/

        .c1{

            background: #2d4ca2;

            color: #41db50;

        }

    </style>

</head>

<body>

<h1 id="h1">id</h1>

<div>

    <p>内容1</p>

</div>

<span class="c1">class1</span>

<div>

    <p>内容2</p>

</div>

<span class="c1">class1</span>

<span class="c1">class1</span>

</body>

</html>

基本应用

2.2 高级选择器

2.2.1 后代选择器

后代选择器：外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔，标签嵌套时，内层的标签成为外层的标签的后代，eg：

div p{

            background-color: rgb(33, 140, 228);

        }

        /* 意思就是div标签内的P标签的样式 */

注：这个在正常的前端学习中频繁使用。

2.2.2 儿子选择器

儿子选择器，通过’>’连接在一起的，仅用于子元素，eg：

div>p{

            color:red;

        }

        /* 意思就是div的子标签p的颜色为红色 */

2.2.3 并集选择器与交集选择器

并集选择器：多个连接器，通过逗号连接而成，同时声明多个分格相同的样式

eg:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>组合选择器</title>

    <style>

        #i1, #i2, #i3{

            background: #2d4ca2;

            color: #41db50;

        }

    </style>

</head>

<body>

<div id="i1">第一行</div>

<div id="i2">第二行</div>

<div id="i3">第三行</div>

</body>

</html>

交集选择器：由俩个选择器连接而成，第一个必须为标签选择器，第二个为类选择器或者是ID选择器

2.2.5 属性选择器

除了HTML元素的id，classy也可以使用特定的属性来选择元素

input[type='text']{ width:100px; height:200px; }，对选择到的标签再通过属性再进行一次筛选，选择type属性等于text的input标签

eg:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style>

        input[type="text"]{

            width:100px;

            height: 200px;

        }

    </style>

</head>

<body>

<input type="text">

<input type="password">

</body>

</html>

2.3 伪类

2.3.1伪类选择器

CSS伪类是用来给选择器添加一些特殊效果

a:link（没有接触过的链接）,用于定义了链接的常规状态

a:hover（鼠标放在链接上的状态）,用于产生视觉效果

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态

a:link {color: #FF0000}     /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hover示例</title>

    <style>

        body{

            margin: 0 auto;

        }

        a{

            text-decoration: none;

        }

        .pg-header{

            height: 38px;

            line-height: 38px;

            width: 100%;

            background-color: #5d48ff;

        }

        .w{

            width: 980px;

            margin: 0 auto;

        }

        .pg-header .log{

            color: #8c3d41;

        }

        .pg-header .menu{

            display: inline-block;

            padding: 0 10px;

            color: white;

        }

        /*当鼠标移动到标签上时以下CSS才生效*/

        .pg-header .menu:hover{

            background-color: #501c56;

        }

    </style>

</head>

<body>

<div class="pg-header">

    <div class="w">

        <a href="" class="logo">Logo</a>

        <a href="" class="menu">全部</a>

        <a href="" class="menu">42区段子</a>

        <a href="" class="menu">1024</a>

    </div>

</div>

</body>

</html>

hover实例

hover实例

2.3.2 focus伪类

:focus input标签获取光标焦点

应用eg:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>focus</title>

    <style>

        .container{

            width: 600px;

            height: 350px;

            margin: 0 auto;

            border: 1px solid red;

        }

        .form{

            margin-top: 135px;

            text-align: center;

        }

        input.text{

            margin-bottom: 10px;

        }

        input.text:focus{

            color: #8c3d41;

            background-color: grey;

        }

    </style>

</head>

<body>

<div class="container">

    <span>搜索框</span>

    <div class="form">

        <form action="">

            <input type="text" class="text">

            <br/>

            <input type="submit" value="搜索" class="submit">

        </form>

    </div>

</div>

</body>

</html>

focus实例

2.3.3 before after伪类

first-letter:文本首字母，特殊样式
before：用于在元素的内容前面插入内容，在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
after:在元素后面插入新内容，也用于清除浮动，在每个 <p> 元素的内容之后插入内容 p:after{ content:"hello"；color:red}

2.4 CSS的继承以及优先级

2.4.1 选择器的优先级

选择器的优先级是按照选择器的权重来计算

选择器    权重

style=""  1000

 #id 　　  100

class 　 10

p 　　　   1

#注意：权重计算永远不进位

补充：

在正常的权重在，也可以用import强制让样式生效，不过不推荐使用，权重会无限大
当权重一样大时，后来者居上
继承的权重与选中的权重相比，继承的权重为0
如果属性都是继承的，权重都是0，采用就近原则，谁的描述近就采用它的样式

2.4.2 选择器的继承性与层叠性

继承：给父级设置一些属性，子级继承了父级的该属性，这就是CSS中的继承，有些属性是可以继承的，只有color,font-*,text-*,line-*可以继承，像一些盒子元素，定位的元素（浮动，绝对定位，固定定位，border, margin, padding, background等）不能继承。

层叠：谁的权重大就会显示谁的样式。

3. CSS常用样式

3.1 通用样式

3.1.1 字体相关属性

text-align规定元素中的文本的水平对齐方式。

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间，水平方向居中
justify 实现两端对齐文本效果。

line-height: 标签高度垂直方向根据标签高度居中

text-decoration:文字装饰

3.1.2 字体属性

color:字体颜色

颜色属性被用来设置文字的颜色:

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

font-weight:字重属性

font-family:字体系列

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。eg:

body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }

font-size:字体大小，设置像素大小，即可设置字体的大小

3.1.3 背景属性

常用背景属性

在HTML中可以直接给body设置背景如下所示

<body background=图片文件名>

CSS中的背景设置如下：

1 background-color: cornflowerblue    ->  指定背景颜色

2 background-image: url('1.jpg');      ->  指定背景图片

3 background-repeat: no-repeat;(repeat:平铺满)   ->  指定背景重复方式(no-repeat;repeat-x;repeat-y)

4 background-position: right top（20px 20px）;  -> 指定背景位置(横向：left center right 纵向：top center bottom )

3.1.4 其他常用属性

其他

height 高度: 像素,百分比
width 宽度: 像素,百分比
text-align:ceter 水平方向居中
text-indent 首行缩进
text-decoration 装饰(去除a标签的下划线 text-decoration:none;)

3.2 边框属性

通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素

边框设置：

宽度(border-width)，样式(border-style)，颜色(border-color) border: 4px dotted red;
border-left,border-right,border-top,border-bottom

1 border-style: solid;

2 border-color: red;

3 border-width: 10px;

4 简写：border: 10px red solid;

常用边框样式：

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>边框</title>

    <style>

        body{

            margin: 0 auto;

        }

        p{

            margin-left: 30px;

            width: 300px;

            height: 100px;

        }

        .c1{

            border: 3px solid red;

        }

        .c2{

            border-top: 3px dashed green;

            border-bottom: 3px dashed red;

            border-left: 3px dotted #804761;

            border-right: 3px dotted blue;

        }

    </style>

</head>

<body>

<p class="c1">这是一句话</p>

<br>

<p class="c2">最后一句话!</p>

</body>

</html>

效果如下

3.3 显示属性

显示属性：设置元素如何被显示

3.3.1 显示分类

(1)display分类

display: none; -- 让标签消失(隐藏元素并脱离文档流)
display: inline; -- 内联元素(内联表签)
display: block; -- 块级元素(块级标签)
display: inline-block; -- 既有inline的属性也有block属性

(2)块级元素和内联元素

block元素：

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度
block元素可以设置width和height属性。块级元素即使设置了宽度,仍然是独占一行
block元素也可以设置margin和padding属性

inline元素：

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
inline元素的宽度是自身内容的宽度(默认有多少占多少)
inline元素设置width和height属性无效
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

inline-block元素：

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）设置inline-block属性，使其既具有block的可设置宽度和高度特性又具有inline的同行特性

3.3.2 块级标签与内联标签(块级元素和内联元素)

(1)块级标签与内联标签实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>块级标签和内联标签</title>

    <style>

        div, p, span{

            width: 100px;

            height: 100px;

        }

        div{

            background: red;

        }

        p{

            background: #747F8C;

        }

        span{

            background: #41db50;

        }

    </style>

</head>

<body>

<div>div(块级标签) </div>

<p>p(块级标签)</p>

<span>span(内联标签)</span>

</body>

</html>

(2)块级标签和内联标签通过display转换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>块级标签和内联标签通过display转换</title>

    <style>

        .inline{

            background: red;

            display: inline;

        }

        .block{

            background: red;

            display: block;

        }

    </style>

</head>

<body>

    <!--将块级标签变成行内标签-->

    <div class="inline">div</div>

    <!--将行内标签变成块级标签-->

    <span class="block">span</span>

</body>

</html>

3.3.3 inline-block应用

display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：

1 #outer{

2 border: 3px dashed;

3 word-spacing: -6px;

4 }

3.4 列表属性

ul,ol{

list-style: none; /*去掉样式*/

list-style: circle;

list-style: disc;

list-style: upper-alpha;

、、、

}

4.CSS补充内容

(1)overflow -> 隐藏溢出

overflow: hidden; //超过范围隐藏

overflow: auto; 　//超出加滚动条　

overflow: scroll; //不管如何都带滚动条

(2)下划线

去掉下划线：text-decoration: none ;
加上下划线： text-decoration: underline;

1 /*清除a标签的下划线*/

2 a{

3      text-decoration: none;

4 }

(3)居中显示

针对block元素居中：

指定block元素宽度
然后指定margin 0 auto

居中测试

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>居中显示</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .content-box{

            width: 100%;

            height: 800px;      /*实际中可以不用设置*/

        }

        .content{

            margin: 0 auto;

            width: 800px;

            height: 800px;      /*实际中可以不用设置*/

            background-color: #747F8C;

        }

    </style>

</head>

<body>

<div class="content-box">

    <div class="content"></div>

</div>

</body>

</html>

居中显示

针对inline元素和inline-block元素居中：设置父元素的text-align属性为center

(4)隐藏的两个方法

display:none; #隐藏了会顶上去
visibility :hidden; #隐藏了不会顶上去

(5)透明度设置及层设置

opacity: 0.5;　　//设置透明度

z-index: 10;　　//设置层(只能作用于定位过的元素!)

(6)清除浏览器默认的margin和padding
*{
margin: 0;
padding: 0;
}

(7)内联标签position设置

如果内联标签position设置为absolute或relative，此时内联标签可以直接设置长和宽而不用再设置display为inline-block

补充：float属性，盒模型，position属性放在下一节单独整理。

https://www.cnblogs.com/gbq-dog/p/10629328.html