前端 CSS

前端 css

层叠样式表

　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

注释

　　/*单行注释*/

　　/*

　　多行注释　　

　　*/

语法结构

选择器 {属性：属性值;属性：属性值;属性:属性值;}

h1 {color:red;font-size:14px;}

三种引入css样式的方式

1 head内style标签内部直接书写css代码
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <style>
        p {
            background-color:red;
            }
        </title>
    </head>
　　（背景框会展示出来）

2 link标签引入外部css文件
    <link href="mystyle.css" rel="stylesheet" type="text/css"/>

3 直接在标签内通过style属性书写css样式
    <p style="color:red"> hello word.</p>        

！！！ css样式通常都应该写在单独的css文件中

css的流程

1 选学习如何查找标签

　　基本选择器
　　　　标签选择器
　　　　id选择器
　　　　类选择器
　　　　通用选择器
　　组合选择器
　　　　后代选择器
　　　　二字选择器
　　　　毗邻选择器
　　　　弟弟选择器
　　属性选择器

　　伪类选择器

　　伪元素选择器

基本选择器

标签选择器所有span标签的颜色都是红色

<style>
span {color:red;}
<style>

id 选择器将id所对应的标签样式修改

<style>
#s1 {font-size: 24px;}
<style>

类选择器会把所有的类包裹继承的标签颜色都改成一样的还有类下面的子标签子子标签

.c1 {color: #43ceff
        }

通用选择器会把所有没有标签样式的都改为一样的标签颜色

 * { color: #ff100c
        }

如果是一个类选择器和一个通用选择器的话会出现

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

     <style>
        .c1 {color: #43ceff
        }
        
         * { color: #ff100c
        }
        
    </style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
    <p>p
        <span>span</span>
    </p>
</div>
<div class="c1">div</div>
</body>
</html>

这是下面相同选择器级别不同类的优先级权重高于通用的类先把所有的类自己的包括内部的和继承的改为类选择器颜色

　　　　　　　后面按照从上往下的执行顺序的时候通用选择器在把所有没有选择器的标签颜色改为通用的颜色

组合选择器

后代选择器后面里面所有的span标签都变成蓝色子子孙孙

    <style>
        div span {
            color: blue;
        }
    </style>

儿子选择器把div里面所有被div包含的span找到（只找儿子这一级）都改为红色

    <style>
        div>span {
            color: red;
        }
    </style>

毗邻选择器 + 对下不对上（且只找最近的一个）都改为蓝色

    <style>
        div+span {
            color: blue;
        }
    </style>

弟弟选择器 ~对下不对上只要是同级别的在div后面的都是它弟弟

    <style>
        div~span {color: deeppink}
    </style>

属性选择器

只要有xxx属性名的标签都找到 [xxx] {color:red;}

    <style>
        [xxx] {color: red}
    </style>

只要标签有属性名为xxx 并且值为1 [xxx='1'] {color:blue;}

    <style>
        [xxx='1'] {color: blue}
    </style>

规定p标签内部徐徐有属性名为xxx并且值为2的标签 p[xxx='2'] {color:green;}

  　<style>
        /*规定p标签里面内部必须有属性名为xxx 并且值为2的标签*/
        p[xxx='2'] {color: green;}
    </style>

分组与嵌套

div 标签一个样式 p 标签一个样式 span 标签一个样式

    <style>
        div {color: red;}
        p {color: red;}
        span {
            color: red;}
    </style>

分组 div ,p,span {color :blue;} 就是把上面单个单个的标签选择器简写

    <style>
        /*分组*/
        div,p,span {color: red}
    </style>

嵌套：不同的选择器可以共用一个样式后代选择器与标签选择器组合使用

    <style>
        /*嵌套：不同的选择器可以使用同一个样式
        后代选择器与标签组合使用
        */
        div p,span {color: yellow}
    </style>

伪类选择器

针对的是a 连接标签四种状态未点击时鼠标悬浮上面点击时点击后返回

    <style>
        /*未点击时*/
        a:link {
            color: red;
　　　　　　　text-decoration:None;
        }
        /*鼠标悬浮上面*/
        a:hover {
            color: yellow;
        }
        /*点击时*/
        a:active {
            color: black;
        }
        /*点击后返回*/
        a:visited {
            color: green;
        }
    </style>
　　补充：input:focus{   /*input输入框获取焦点时样式*/
　　　　background-color:red;}  文本框输入的时候可以显示文本框的背景颜色

　　　　text-decoration: None; 连接下划线去掉

伪元素选择器

可以设置手字母样式可以在标签前面添加内容可以在标签后面添加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*首字母大写 并且设置颜色红色*/
        p:first-letter {
            color: red;
            font-size: 24px;
        }
        /*在p标签前面加上内容*/
        p:before{
            content: '这是添加的内容';
            color: orangered;
        }
        /*这是标签后面添加的内容*/
        p:after{
            content: '这是后面添加的';
            color: orange;
            font-size: 48px;
        }
    </style>
</head>
<body>
<p>继承是css的一个主要特征，它是依赖于组向圣诞节放假快乐</p>
<p>继承是css的一个主要特征，它是依赖于组向圣诞节放假快乐</p>
<p>继承是css的一个主要特征，它是依赖于组向圣诞节放假快乐</p>
</body>
</html>

2 如何给查找到的标签设置样式

id  用来唯一标识标签
class  标签类属性（*****）,可以由多个值
    可以理解成python面向对象的继承

3 你可以给任意的标签加任意的属性名和属性值

　　<style>

　　　　p[xxx='2'] {color:red;}

　　</style>

4 研究选择器优先级

　　相同选择器不用的引入方式就近原则谁越靠近标签谁说了算

　　不同选择器相同的引入方式　　

　　　　行内样式 > id 选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
        #p1 {color: green;}
        /*类选择器*/
        .c1 {color: aqua;}
        /*标签选择器*/
        p {color: red;}
    </style>
    <!--标签选择器-->
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1" style="color: blue">p</p>
</body>
</html>

5 如何修改标签样式

样式修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div { 400px;
            height: 100px;}
        p {font-size: 16px;
            font-weight: bolder;}
    </style>
</head>
<body>
<div>div</div>
<div>div</div>
<p>坚实的科技了解了解</p>
</body>
</html>

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

文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*color: orange;*/
        /*color: rgb(0,0,255)*/
        /*color:#ff100c;*/
           
            /*最后一个参数控制的是透明度*/
         color: rgba(0,0,234,0.3);
        }
    </style>
</head>
<body>
<p>这是文本颜色修改的</p>
</body>
</html>

文本属性
- 文本内容是右对齐right 左对齐left（默认）居中center justify 两端对齐
- 本文内容上面加下划线overline
- 下面加下划线underline
- 作废线(穿过文本下的一条线) line-through
- 缩进 text-indent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*把p标签内容 右对齐 */
            /*text-align: right;*/
            /*text-align: center;*/
            /*text-align: left;*/

            /*把p标签内容下面加上下划线*/
            text-decoration: underline;

            /*把p标签内容上面加一条下划线*/
            /*text-decoration: overline;*/

            /*p标签内容有一条横线  和作废一段话一样*/
            /*text-decoration: line-through;*/

            /*把p标签内容缩进48px像素位置*/
            text-indent: 48px;
        }
        /*连接下划线去掉*/
        a {text-decoration: none}
    </style>
</head>
<body>
<p>以把多个字体名称作为</p>
<a href="https://www.baidu.com">百度</a>
</body>
</html>

背景属性
- 背景颜色 background-color
- 背景图片填充 background-image:url('图片')
- 是否重复repeat(默认）：背景图片平铺排满整个网页
  - repeat-x :背景图片只在水平方向上平铺
  - repeat-y: 背景图片只在垂直方向上平铺
  - not-repeat: 背景图片不平铺
  - background-repeat:no-repeat;
- 背景位置 background-position:left top;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
             400px;
            height: 400px;
            /*背景颜色*/
            /*background-color: orange;*/
            /*background-image: url("1.png");*/
            /*!*不重复*!*/
            /*background-repeat: no-repeat;*/
            /*!*位置 left左面居中对齐 *!*/
            /*background-position: center;*/

             /*支持简写*/
            background: no-repeat center url("1.png") orange;
        }
    </style>
    
</head>
<body>
<div></div>
</body>
</html>

背景图片示例设置图片宽度颜色背景可以支持固定其他页面划动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 400px;
            background-color: tomato;
        }
        .box {
            height: 400px;
            background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
            /*背景附件 固定的*/
            background-attachment: fixed;

            /*可以只填充一个不重复的图片 且 图片周围有背景色 支持滑动*/
            /*height: 400px;*/
            /*background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");*/
            /*background-color: orange;*/
            /*background-repeat: no-repeat;*/
            /*background-position: center;*/
            /*background-attachment: fixed;*/
        }
        .c2 {
            height: 400px;
            background-color: red;
        }
        .box1 {
            height: 400px;
            background: url("jie.jpg");
            background-position: center;
            /*背景附件 固定的*/
            background-attachment: fixed;
        }
        .c3 {
            height: 400px;
            background-color: fuchsia;
        }

    </style>
</head>
<body>
<div class="c1"></div>
<div class="box"></div>
<div class="c2"></div>
<div class="box1"></div>
<div class="c3"></div>
</body>
</html>

边框　
- 边框宽度 border-width
- 边框是实线、虚线 border-style;
- 颜色 border-color;
- 边框样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border: 3px solid red;
            
            /*border- 3px;*/
            /*!*dashed虚线*!*/
            /*border-style: dashed;*/
            /*border-color: deeppink;*/
        }
    </style>

</head>
<body>
<div>div</div>
</body>
</html>

画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
             400px;
            height: 400px;
            background-color: red;
            /*边框颜色 实线 3px*/
            border: 3px solid black;
            /*半径是边缘的50%*/
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

display 属性
- none 将块级标签内容隐藏起来并让位置
- inline 将块级标签变成行内标签
- block 将行内属性变成块级标签
- inline-block 将选择的标签即具有行内标签特点又有块级标签的特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*div {*/
            /*!*不显示不占位*!*/
            /*display: none;*/
        /*}*/

        /*div {*/
            /*!*inline将款及标签变成行内标签*!*/
            /*display: inline;*/
        /*}*/

        /*span {*/
            /*!*block 块 将行内标签变成 块级标签*!*/
            /*display: block;*/
        /*}*/

        span {
            /*将选择的标签即具有行内标签特点又有块级标签的特点*/
            display: inline-block;
            height: 400px;
             400px;
            background-color: red;
            border: 3px solid black;
        }

    </style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>

相关阅读:
母版页和相对路径
 回发或回调参数无效
 ASPNETPAGER的使用方法
 关于ID的取法
 JS获取屏幕，浏览器，网页高度宽度
 form配置问题
 checkedListBox
html标签的赋值与取值
 如何将前台线程改为后台线程
 在线程委托中实现参数的传递
原文地址：https://www.cnblogs.com/lakei/p/10946279.html