前端CSS

程序员文章站 2022-06-23 23:49:56

[TOC] 1.CSS介绍现在的互联网前端分三层： HTML：超文本标记语言。从语义的角度描述页面结构。 CSS：层叠样式表。从审美的角度负责页面样式。 JS：JavaScript 。从交互的角度描述页面行为 CSS：Cascading Style Sheet，层叠样式表。C ......

1.css介绍
2.css的引入方式

1.css介绍

现在的互联网前端分三层：

html：超文本标记语言。从语义的角度描述页面结构。
css：层叠样式表。从审美的角度负责页面样式。
js：javascript 。从交互的角度描述页面行为

css：cascading style sheet，层叠样式表。css的作用就是给html页面标签添加各种样式，定义网页的显示效果。简单一句话：css将网页内容和显示样式进行分离，提高了显示功能。

html的缺陷：

1.不能够适应多种设备

2.要求浏览器必须智能化足够庞大

3.数据和显示没有分开

4.功能不够强大

css 优点：

1.使数据和显示分开

2.降低网络流量

3.使整个网站视觉效果一致

4.使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

2.css的引入方式

2.1行内样式

<div>
    <p style="color: green">我是一个段落</p>
</div>

2.2内接样式

<style type="text/css">
    /*写我们的css代码*/
    span{
    color: yellow;
    }
</style>

2.3外接样式-链接式

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

2.4外接样式-导入式

<style type="text/css">
        @import url('./index.css');
</style>

3.css选择器

3.1基本选择器：

标签选择器
类选择器
id选择器

3.2标签选择器(标签名)

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

3.3类选择器(.)

所谓类：就是class . class与id非常相似任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

类的使用，能够决定前端工程师的css水平到底有多牛逼？在这里一定要有”公共类“的概念。

.lv{
     color: green;
 
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;

  }

<!-- 公共类    共有的属性 -->
<div>
    <p class="lv big">段落1</p>
    <p class="lv line">段落2</p>
    <p class="line big">段落3</p>
</div>

3.4id选择器(#)

同一个页面中id不能重复。

任何的标签都可以设置id ，id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和aa是两个不一样的属性值

#box{
    background:green;
}
            
#s1{
    color: red;
}

#s2{
    font-size: 30px;
}

<body>
    <div id="box">娃哈哈</div>
    <div id="s1">爽歪歪</div>
    <div id="s2">qq星</div>
</body>

3.5高级选择器：

后代选择器
子代选择器
并集选择器(组合选择器)
交集选择器

3.5.1后代选择器

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

3.5.2子代选择器

使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

.container>p{
     color: yellowgreen;
}

3.5.3毗邻选择器

.c1+p{
    color:green;
}
找的是紧挨着class属性为c1的标签的下面的标签
示例:同上

3.5.4弟弟选择器

.c1~p{
    color: green;
}

3.5.5属性选择器

通过标签属性来找到对应的标签
通过属性来找写法:
    [xxx]{color: red;} 找到有xxx属性的所有标签
    [xxx="p2"]{color:red;} 找到有xx属性的并且属性值为p2的所有标签
    p[title]{xx: xx;} 找到所有有title属性的p标签
    p[title="p2"]{xx: xx} 找到所有有title属性的并且属性值为p2的p标签


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        p[xxx='p2']{
            color:red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p xxx="p2">p2</p>
    <p xxx="p3">p3</p>
</body>
</html>

3.5.5并集选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

/*并集选择器*/
h3,a{
    color: #008000;
    text-decoration: none;
}

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,a {
      margin: 0;
      padding: 0
   }
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/

3.5.6交集选择器

使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器语法：div.active

比如有一个

这样的标签。那么它表示两者选中之后元素共有的特性。

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 */
h4.active{
    background: #00bfff;
}

3.5.7伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则"

/*link表示没有被访问的a标签的样式*/
a:link{

color: #666;
}
/*visited表示访问过后的a标签的样式*/
a:visited{

color: yellow;
}
/*hover表示鼠标悬停时a标签的样式*/
a:hover{

color: green;
}
/*active表示鼠标摁住的时候a标签的样式*/
a:active{

color: yellowgreen;
}

3.5.8伪元素选择器(伪标签选择器)

/*设置第一个首字母的样式*/
     p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'alex';
        }
        
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

3.5.9属性选择器

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

/*根据for属性查找，找到所有又for属性的，设置字体颜色为红色*/
/*[for]{
color: red;
}*/

/*找到for属性的值等于username的元素 字体颜色设为黄色*/
/*[for='username']{
color: yellow;
}*/

/*以....开头  ^*/ 
/*[for^='user']{
color: #008000;
}*/

/*以....结尾   $*/
/*[for$='vvip']{
color: red;
}*/

/*包含某元素的标签*/
/*[for*="vip"]{
color: #00bfff;
}*/

/*指定标签的for属性
其中for属性的值是以空格隔开的值列表，
user1是值列表中的一个独立值*/
label[for~='user1']{
    color: red;
}

input[type='text']{
    background: red;
}

4.选择器的权重

有些时候我们可能会给同一个标签设置多个样式，遇到了重叠项的设置又该听谁的呢？这里就要用到选择器的权重。

行内样式 1000> id选择器 100 > 类选择器 10 > 标签选择器 1 > 继承样式 0

css的两大特性：继承性和层叠性

继承性：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。

记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

继承规则

层叠性：权重大的标签覆盖掉了权重小的标签，谁的权重大，浏览器就会显示谁的属性

5.高度宽度

width宽度
height高度
    块级标签能设置高度宽度,内联标签不能设置高度宽度,内敛标签的高度宽度由标签内部的内容来决定.
示例
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>

        div{
            height: 100px;
            width: 200px;
            background-color: purple;
        }
        span{
            height: 100px;
            width: 200px;
            background-color: yellow;
        }

    </style>
</head>
<body>
<div>div1</div>
<span>span1</span>

</body>
</html>

6.字体属性

字重设置的值

font-weight用来设置字体的字重（粗细）。

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

字体
font-family:'宋体','楷体'...
字体大小
font-family: '楷体','黑体';  /* 字体,从左往右找浏览器能够支持的字体 */
font-size: 10px;           /* 设置字体大小,默认字体大小是16px */
字重
font-weight:bold;加粗

字体颜色
/*color:red;*/
/*color: #668b8b;  */
/*color: rgb(255, 170, 205);*/
/*color: rgba(255, 255, 100, 0.5) 设置透明度*/

7.文本

text-align 文字的水平对齐
    left 左对齐
    center 居中
    reght 右对齐
text-decoration 文本装饰
    none;         没有下划线
    line-through; 中划线
    overline;     上划线
    underline;    下划线

text-indent 文本缩进
    text-indent: 2em; em单位是一个相对单位,相对当前字体大小的像素是1em

line-height 行高,设置行高=容器高度,文字自动垂直居中
    line-height: 200px;
    
color:设置字体颜色

8.背景图片

background-color: red;   在没有背景图片覆盖的范围显示背景颜色
background-image: url('timg.jpg'); 设置背景图片
height: 400px;
width: 400px; 
background-repeat: no-repeat; 设置图片不重复   repeat-x水平重复   repeat-y垂直重复
background-position: right top; 图片的位置    左中右x 上中下y
/*left center right /top center bottom*/
background-attachment: fixed; 在窗口中固定图片的位置
background:red url("timg.jpg") no-repeat left center;  把所有的设置综合写在background中

9.边框的设置

边框样式的值

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

width: 100px;
height: 100px;
/*border-color: tomato green gray yellow;*/
/*border-width: 1px 3px 5px 7px;*/
/*border-style: solid dotted dashed double;*/
/*一个值:上下左右
四个值:遵循顺时针上右下左
三个值:上 右左 下
两个值:遵循上下 左右
*/
/*border-top-style:solid ;*/  单独设置顶线的样式(left,bottom,right)
/*border-left-style:solid ;*/ 单独设置左边线的样式
/*border-top-color:red;*/     单独设置顶线颜色
border:yellow solid  10px;    统一设置边框的颜色 样式 宽度

10.块和行内的概念\转换

对于行内标签来说不能设置宽和高
有些时候需要行内标签也设置宽和高,需要进行行内-->块,行内->行内块
display的属性值 : block块  inline行内 inline-block行内快 none
display: block;        独占一行并且可以设置宽高
display: inline-block;  既可以设置宽高又不会独占一行 行内\块转行内快
display: inline;        表示一个行内元素,不能设置宽高
display: none;          不仅不显示内容,连位置也不占了

11.盒模型

在css中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

盒模型有两种：标准模型和ie模型。我们在这里重点讲标准模型。

盒模型示意图

前端CSS

11.1盒模型的属性

width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离

如果让你做一个宽高402*402的盒子，您如何来设计呢？答案有上万种，甚至上亿种。

盒模型的计算：width/height+2padding+2border

如果一个盒子设置了padding，border，width，height
盒子的真实宽度 = width+2*padding+2*border
盒子的真实高度 = height+2*padding+2*border

width不等于盒子的真实宽度

如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。

11.2padding的设置

padding有四个方向，分别描述4个方向的padding。描述的方法有两种：

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

1.写小属性,分别设置不同方向的padding

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右  下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;         
/*上下左右*/
padding: 20px;

11.3border的设置

border:边框的意思，描述盒子的边框

边框有三个要素：粗细线性样式颜色（如不写颜色默认为黑色。如不写粗细不显示边框。只写线性样式，默认有上下左右 3px宽度的实体黑色边框。）

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

/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/

/*设置顺序 ：上 右 左 下*/
/*border-style: 实线，点状，双线，虚线*/

按照三要素来写border

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

border-radius属性

利用border画三角

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        div{
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 20px;
            border-color: #7ef0c2 transparent transparent transparent;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

11.4margin的设置

margin：外边距的意思。表示边框到最近盒子的距离。

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
/*表示盒子距离右面的盒子100px*/
margin-right: 100px;
/*表示盒子距离下面的盒子100px*/
margin-bottom: 100px;

设置margin

html:
<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>
css:
    *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            border: 1px solid gray;
            /*float: left;*/
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;
            /*float: left;*/
        }
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
            /*float: left;*/
        }

/*
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候注意margin的用法。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
*/

margin的塌陷

div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;
        }
/*当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？

设置margin-left:auto；我们发现盒子尽可能远离左侧，当设置margin-right:auto；我们发现盒子尽可能远离右侧。当两条语句并存的时候，我们发现盒子尽可能远离两侧，此时盒子就居中了。

如果给盒子设置浮动，那么margin:0 auto失效。

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto; 
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
*/

12.浮动

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

float：表示浮动的意思。它有四个值

none: 表示不浮动，默认
left: 表示左浮动
right：表示右浮动

清除浮动(解决塌陷问题)

clear: both; /* clear清除浮动 */ left\right

方式1:
    1.父级标签设置高度
    2.通过伪元素选择器来进行清楚浮动:写法如下
        .clearfix:after{
            content:'';
            display: block;
            clear: both;
        }
     示例:
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        .c1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .c2{
            width: 100px;
            height: 100px;
            background-color: green;
            float: right;
        }
        .c3{
            /*width: 100px;*/
            height: 100px;
            background-color: pink;
            /*clear: both; !* clear清除浮动 *!*/
        }

        .clearfix:after{
            content:'';
            display: block;
            clear: both;
        }

        /* 浮动,会造成父级标签塌陷问题 */
        /* 解决父级标签塌陷问题方式1 */
        /*.cc{*/
        /*    height: 100px;*/
        /*}*/
    </style>

</head>
<body>

<!--ajsdfja;sdjfo;asjdfo-->
<div class="cc clearfix">
    <div class="c1">div1</div>
    <div class="c2">div2</div>
</div>
<div class="c3">div3</div>

</body>
</html>

clear清楚浮动

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

overflow溢出

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

13.定位

定位有三种：相对定位、绝对定位、固定定位

position : relative /absolute /fixed
top:10px;
right:10px;
bottom:10px;
left:10px;
相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置
绝对定位 :绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升
        如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整个页面
        如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位
        父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置
固定定位 :固定是相对于整个窗口的

14.z-index

指的就是各个盒子重叠在一起谁上谁下的问题。

四大特性，只要你记住了，页面布局就不会出现找不到盒子的情况。

- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在html后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用

15.opacity(透明度)

opacity: 0.5;调整d4对应的整个标签的透明度是50%
.d4{
    opacity: 0.5;
}
<div class="d4">
    你好你好娃哈哈
    <img src="timg.jpg" alt="">
</div>

上一篇： 01-HTML介绍

下一篇：和男朋友吵架

前端CSS

1.css介绍

2.css的引入方式

2.1行内样式

2.2内接样式

2.3外接样式-链接式

2.4外接样式-导入式

3.css选择器

3.1基本选择器：

3.2标签选择器(标签名)

3.3类选择器(.)

3.4id选择器(#)

3.5高级选择器：

3.5.1后代选择器

3.5.2子代选择器

3.5.3毗邻选择器

3.5.4弟弟选择器

3.5.5属性选择器

3.5.5并集选择器

3.5.6交集选择器

3.5.7伪类选择器

3.5.8伪元素选择器(伪标签选择器)

3.5.9属性选择器

4.选择器的权重

css的两大特性 ：继承性和层叠性

5.高度宽度

6.字体属性

7.文本

8.背景图片

9.边框的设置

10.块和行内的概念\转换

11.盒模型

11.1盒模型的属性

11.2padding的设置

11.3border的设置

11.4margin的设置

12.浮动

13.定位

14.z-index

15.opacity(透明度)

jeecms的问题_html/css_WEB-ITnose

纯HTML+CSS打造组织架构图

CSS制作图片水平垂直居中_html/css_WEB-ITnose

div+css布局实例淘宝分析(二)_html/css_WEB-ITnose

html-php内嵌table 如何使用外部css样式

.htaccess 文件重定向之后，小弟我的css和js都无法访问了。咋回事呢？求大家指导一下

仿Windows计算器（一）??界面部分_html/css_WEB-ITnose

探究为何rem在chrome浏览器上计算出错_html/css_WEB-ITnose

CSS组件化思考_html/css_WEB-ITnose

怎么把button按钮设为超链接_html/css_WEB-ITnose

css的两大特性：继承性和层叠性