css（简简单单学习）

最新推荐文章于 2024-03-25 19:58:02 发布

HelloJinrong

最新推荐文章于 2024-03-25 19:58:02 发布

阅读量157

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44039605/article/details/108448191

版权

前端专栏收录该内容

13 篇文章

订阅专栏

概述

1. css是啥

cascading style sheet 层叠样式表

css：表现（美化网页）

2. 怎么用

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

    <!--规范，<style>可以编写css代码，以分号结尾
    语法：
        选择器{
            声明1；
            声明2；
            声明3；
        }
    -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>标题</h1>

</body>
</html>

h1{
    color: #ff0000;
}

内容与表现分离
可以复用

3. 导入方式

外部

链接式：<link>标签

导入式：(不常用)

<style>
   @import url("css/style.css");
</style>

内部样式

<style>标签内

行内样式

<!--行内样式-->
<h1 style="color: red">标题</h1>

优先级：就近原则（离元素越近）

4.选择器（一些）

选择页面上某一个或某一类元素

标签选择器


        /*标签选择器：会选择页面上所有标签*/
       h1{
           color: #35577D;
       }

类选择器


        .hjr{
            color: antiquewhite;
        }

id选择器


        /*id选择器:id必须保证全局唯一！
        #id名称{}
        */
        #hjrid{
            color: #141E30;
        }

优先级： id>类>标签！！

选择

元素内的所有

元素


        div p{
            background: #35577D;
        }

选择所有父级是

元素的

元素

 body>p{
            background: #35577D;
        }

div+p 选择所有紧接着

元素之后的

元素 (一个)

div,p 选择所有

元素和

元素

选两个，向下所有兄弟元素

 /*通用选择器*/
       .active~p{
           background: #35577D;
       }

结构伪类选择器

/*ul的第一个子元素*/
    ul li:first-child{
        background: #35577D;
    }
 /*ul的最后一个子元素*/
    ul li:last-child{
        background: red;
    }

一些属性

字体 font-family: Georgia;
居中 text-align: center;
大写 text-transform: uppercase;
字体大小 font-size: 18px;
段落第一行加粗
```
p:first-line{
    font-weight: bold;
}
```

设图片背景色

image {
    background-size: cover;
    background-position: center;
    height: 300px;
    background-image:url("../img/background-img.jpg");
}

透明度 opacity: 0.75;
斜体 font-style: italic;
给 .caption a 设置鼠标hover 上去的样式，去掉下横线，颜色变成紫色
```
.caption a:hover{
    text-decoration: none;
    color: purple;
}
```

box model

设 #banner 高度为350px.
```
height:350px ;
```
给 h1 添加 border style

border-style: solid;/*实线*/
border-color: white;

设置 h3 border 样式

border-color: red;
border-style: dashed;/*虚线*/

设置 .navigation li elements to have 10 pixels of padding.

padding: 10px;

设置每个段落向上 margin 为 40 px.
```
 margin-top: 40px;
```
设置 .share a margin 为 10 px.
```
margin: 10px;
```
使用简写, 设置 h3 上下 margins 30 px, 左右 margins 20 px.
```
margin: 30px 20px;
```
使用简写, 设置 h3 上下 padding 20 px, 左右 padding 30 px.

padding: 20px 30px;

设置 .pull-quote 的宽度为 400 px. 并且通过 margin 使其水平居中.

.pull-quote {
    width: 400px;
    margin: 0 auto;
    ;
}

设置 #main 的 margin 使其内容水平居中 .

margin: 0 auto;

设置 #main 宽度为500px, 高度为800px, 并且超出可以滚动.

width: 500px;
height: 800px;
overflow: auto;

重置 body 的 margin and padding default values.

margin: 0;
padding: 0;

隐藏 .global

.global{
    visibility: hidden;
}