CSS

时间：2018-09-01 20:34:57 阅读：219 评论：0 收藏：0 [点我收藏+]

一.CSS选择器

1.CSS语法

h1(选择器找标签) {color:red;font_size:14px;}

2.CSS style的导入方式

(1)直接将样式写在标签内部的style属性

<div style="color: yellow">我是div标签</div>

(2)在head标签中写style标签

<head>
    <style>
        p{
            color: red;
        }
    </style>
</head>

<body>

<p>我是p标签</p>
<script></script>
</body>

(3)将样式写在单独的CSS文件中,通过link标签的href属性导入(主要项目中多用)

html文件:

<head>
    <link rel="stylesheet" href="css  href属性.css">
</head>

<body>
<span>我是span标签</span>
</body>

css文件:

span{
    color: aqua;
}

3.CSS选择器

(1)基本选择器

①元素选择器: p

例如:是将所有的p标签全部改成一个颜色

<head>
    <style>
        p{
            color: lawngreen;
        }
    </style>
</head>

<body>
<p>我是p标签1</p>
<p>我是p标签2</p>
<p>我是P标签3</p>
<p>我是P标签4</p>
<p>我是p标签5</p>
</body>

②ID选择器: #i1

例如:是将所有的id值为i1的标签全部变成一个颜色

<head>
    <style>
        #i1{
            color: red;
        }
    </style>
</head>
<body>
<div id="i1">我是div标签1</div>
<div id="i1">我是div标签2</div>
<div id="i1">我是div标签3</div>
<div>我是div标签4</div>
<div>我是div标签5</div>
</body>

③类选择器: ".c1" class类中用空格隔开/查看整个文档中的cls的值是不是那个值,如果是就改变颜色

例如:是将所有的class为c1的颜色全部变成一个颜色

<head>
    <style>
        .c1{
            color: red;
        }
    </style>
</head>
<body>
<p class="c1">我是p标签1</p>
<p>我是p标签2</p>
<div class="c1">我是div标签1</div>
<div>我是div标签2</div>
</body>

(2)组合选择器

①后代选择器

例如:div里面所有的span标签的颜色变成一个颜色

<head>
    <style>
        div span {
            color:red;
        }
    </style>
</head>
<body>
<div>
    <div>
        <span>我是span标签1</span>
        <p>
            <span>我是span标签2</span>
        </p>
    </div>
</div>
</body>

②儿子选择器

例如:选择所有父级是div元素的span元素(标签)

<head>
    <style>
        div>span
        {
            color: lawngreen;
        }
    </style>
</head>
<body>
<div>
    <div>
        <span>我是span标签1</span>
        <p>我是p标签</p>
    </div>
    <span>我是span标签2</span>
</div>
</body>

③毗邻选择器

例如:选择所有紧接着div元素之后的p元素,并改变样式

<head>
    <style>
        div+p{
            color: yellow;
        }
    </style>
</head>
<body>
<div>
    <div>我是div标签1</div>
    <p>我是p标签1</p>
</div>
<p>我是p标签2</p>
</body>

④弟弟选择器

例如:是将p标签下面的所有兄弟span标签找到并改变样式

<head>
    <style>
        p~span{
            color: aqua;
        }
    </style>
</head>
<body>
<p>这是p标签1</p>
<span>这是span标签1</span>
<span>这是span标签2</span>
<div>这是div标签</div>
<span>这是span标签3</span>
</body>

(3)属性选择器

例如1:光找有s14这个属性的元素,并为其改变颜色

<head>
    <style>
        [s14]{
            color: yellow;
        }
    </style>
</head>
<body>
<div s14="123">这是div标签1</div>
<div>这是div标签2</div>
<p s14="456">这是p标签</p>
</body>

例如2:找div元素下有s14属性的,并改变样式

<head>
    <style>
        div[s14]{
            color: yellow;
        }
    </style>
</head>
<body>
<div s14="123">这是div标签1</div>
<div>这是div标签2</div>
<p s14="456">这是p标签</p>
</body>

(4)分组选择器

例如:找到父级是div元素的p标签和所有紧接着div标签的p标签的元素,并改变样式

<head>
    <style>
        div+p,div>p{
            color: red;
        }
    </style>
</head>
<body>
<div>我是div标签</div>
<p>我是p标签1</p>
<div>
    <p>我是p标签2</p>
</div>
</body>

(5)嵌套选择器

例如:找d1后代中有类是c1样式的span的标签,并改变样式

<head>
    <style>
        #d1 span.c1{
            color: red;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2">
        <span>这是span1</span>
        <p>
            <span class = "c1">这是span2</span>
        </p>
    </div>
</div>
</body>

(6)伪类选择器

①未访问的链接(设置没有访问过网址的颜色)

<head>
    <style>
        a:link{
            color:red;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

②已访问的链接(设置已经访问过网址的颜色)

<head>
    <style>
        a:visited{
            color: yellow;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

③鼠标移动到链接上的颜色 (常用)

<head>
    <style>
        a:hover{
            color: red;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

④选定的链接(鼠标点住网址的那一时刻的时间的颜色)

<head>
    <style>
        a:active{
            color: blue;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

⑤input输入框获取焦点的样式

<head>
    <style>
        input:focus{
            outline: none;
            background-color: yellow;
        }
    </style>
</head>
<body>
<label for="i1">用户名:</label>
<input id="i1" type="text">
</body>

(7)伪元素选择器 (before和after多用于清除浮动)

①first-letter 常用的给首字母设置特殊样式

<head>
    <style>
        p:first-letter{
            font-size: 48px;    (字体大小)
            color:red           (字体颜色)
        }
    </style>
</head>
<body>
<p>我是一个p标签</p>
</body>

②before 在标签之前插入内容

<head>
    <style>
        p:before{
            content:"*";       (添加的内容)
            color: darkred;    (添加内容的字体颜色)
        }
    </style>
</head>
<body>
<p>我是一个p标签</p>
</body>

③after 在标签之后插入内容

<head>
    <style>
        p:after{
            content:"*";    (添加的内容)
            color: red;     (添加内容的字体颜色)
        }
    </style>
</head>
<body>
<p>我是一个p标签</p>
</body>

4.CSS选择器的优先级

(1)选择器相同 (最下面的会生效,中间存在覆盖的问题)

<head>
    <style>
        p{
            color: red;
        }
        p{
            color: blue;
        }
    </style>
</head>
<body>
<p>我是p标签1</p>
<p>我是p标签2</p>     ====>展现出来的是蓝色
</body>

(2)选择器不同 (不同的选择器优先级不一样)

技术分享图片

例子一:打印出来的结果是黄色的(因为内联样式大于id选择大于类选择器大于元素选择器)

html文件:

<head>
    <link rel="stylesheet" href="css.css">
    <style>
        #d1{
            color: red;
        }
    </style>
</head>
<body>
<div class="c1" id="d1" style="color: yellow">这是div标签1</div>
</body>

css文件:

.c1{
    color: blue;
}

例子二:嵌套 (打印出来的结果:这是div标签是黄色,div里面的p标签是红色)

<head>
    <link rel="stylesheet" href="css.css">
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
<div class="c1" id="d1" style="color: yellow">这是div标签1</div>
<div>
    <p>div里面的p</p>
</div>
</body>

强制生效: (在特殊情况之下才使用,但是尽量不要使用)

p{
    color:blueviolet !important;
}

5.css的属性相关

(1)宽和高

不是任何标签都可以设置宽和高,只有块级标签才可以设置,内联标签的宽度是由内容决定的

width属性可以为元素设置宽度

height属性可以为元素设置高度

例如:

<head>
    <style>
        div{
            width: 200px;      (宽度)
            height: 200px;     (高度)
            background-color: red;     (背景颜色)
        } 
    </style>
</head>
<body>
<div>我是div标签1</div>
<div>我是div标签2</div>
</body>

技术分享图片

(2)字体属性

①文字字体(放指定用的字体) 可以放入多个字体,如果第一个浏览器不支持,就会尝试第二个

<head>
    <style>
        body{
            font-family: "Microsoft YaHei", "微软雅黑", sans-serif
        }
    </style>
</head>
<body>
<p>这是p标签1</p>
<p>这是p标签2</p>
<p>这是p标签3</p>
<p>这是p标签4</p>
<p>这是p标签5</p>
</body>

②字体大小

例子:

<head>
    <style>
        body{
            font-size: 34px;    (如果设置成inherit表示继承父元素的字体大小值)
        }
    </style>
</head>
<body>
<p>这是p标签</p>
</body>