CSS3

说明
此笔记为本人学习遇见狂神说的教程学习笔记，侵删。

快速入门

html文件中

<!--    规范，<style> 可以编写css的代码，每个声明，最好使用分号结尾
    语法：(里面不能写html代码， 注释/**/)
        选择器{ 
            声明1;
            声明2;
            声明3;
        }

-->
    <style>
        h1{
            color: red;
        }
    </style>

外部引用（建议）

单独写一个.css文件，用link引入

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

css的优势

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录！

css导入方式

h1{
    /*外部样式*/
    color: blue;
}

<head>
    <style>
        h1{
            /*内部样式*/
            color: green;
        }
    </style>
    <link rel="stylesheet" href="css/style.css">

</head>
<!--
行内样式：在标签元素内，编写一个style属性，编写样式
    优先级 行内>内部>外部 （错误！）
    就近原则，谁离得近就是谁，外部导入的位置 or 覆盖原则？
    行内多个  ;结尾
-->
<h1 sytle="color: red">标题</h1>

外部标签两种写法

链接式

<!--链接式-->
<link rel="stylesheet" href="css/style.css">

导入式 CSS 2.1 特有

先加载网页骨架在加载美化

<!--导入式-->
    <style>
        @import url("css/style.css");
    </style>

选择器

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

基本选择器

标签选择器

<style>
    /*标签选择器，会选择页面上所有的这个标签的元素*/
    h1{
        color: #123456;
        background: #f98f;
        /*圆角*/
        border-radius: 20px;
    }
    p{
        font-size: 80px;
    }
</style>

类选择器 class

<style>
        /*类选择器的格式，  .class的名称{}
            可以多个标签归类,是同一个class，可以复用跨标签
        */
        .hhh{
            color: aqua;
        }
        .www{
            color: antiquewhite;
        }
    </style>

id选择器

<style>
    /* id选择器 id全局唯一！
    #id名称{}
    */
    #hhh{
        color: aqua;
    }
</style>

顺序： id > class > 标签

高级选择器

层次选择器 - 不包括自己

后代选择器：在某个元素的后面
```
body p{
    background: red;
}
```
子选择器
```
body>p{
    background: green;
}
```
相邻兄弟选择器
只有一个相邻（向下）
```
.[class] + p{
    background: gold;
}
```
通用选择器
当前元素向下的所有兄弟元素
```
.[class]~p{
    background: yellow;
}
```

结构伪类选择器

<style>
        /*选择ul的第一个子元素*/
        ul li:first-child{
            background: green;
        }
        /*选择ul的最后一个子元素*/
        ul li:last-child{
            background: gold;
        }
        /*选择p标签，定位到其父标签，选择当前的第(x)个元素，
          当该元素与设置的标签一致时，应用修改

          不分类型
          */
        p:nth-child(2){
            background: red;
        }
        /*选中父元素，下的第(x)个，类型

        分类型
        */
        p:nth-of-type(3){
            background: aqua;
        }
        /*经过*/
        a:hover{
            background: black;
        }
    </style>

属性选择器（常用）

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

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*存在id属性的元素
            a[id]{}
            属性名，属性名+属性值（可正则）
            = 绝对等于
            *= 包含
            ^= 开头
            $= 结尾
        */
        a[class*="links"]{
            background: green;
        }
        a[id=first]{
            background: yellow;
        }
        /*选中href中以http开头*/
        a[href^=a]{
            background: red;
        }
    </style>

</head>
<body>

<p class="demo">
    <a href="https://livinfly.top" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">7</a>
    <a href="a.jpg" class="links item">6</a>
    <a href="2.png" class="links item">5</a>
    <a href="abc" class="links item">4</a>
    <a href="sss.doc" class="links item">3</a>
    <a href="aaa.txt" class="links item last">2</a>
</p>

</body>
</html>

美化网页元素

span标签：重要的字放进去（约定俗称的东西） div也类似

字体样式

<!--
font-family 字体（可以同时一个中文一个英文……
font-size px  em 字体大小  em是字，px是像素
font-weight: bold lighter 可以直接改值 粗细
color 颜色

font: oblique bolder 16px "楷体";
-->

文本样式

颜色
文本缩进
缩进
行高
装饰
文本图片居中

<!--
color
    文字，#FFFFFF
    RGB，RGBA（透明度 0~1）
排版
    text-align: center; 居中
    text-indent: 2em; 首行缩进
background 背景色
height 背景高度
line-height 行高
想要文字上下居中，行高与背景高度一致

text-decoration: underline; 下划线
line-through; 中划线（删除线
overline; 上划

多标签选择器
img,span{
    vertical-align: middle; 竖直居中
}
-->

阴影

/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: #ffffff 10px -10px 2px
}

超链接伪类

a{
    text-decoration: none;
    color: black;
}
/*未访问*/
a:link{
    color: aqua;
}
/*悬停*/
a:hover{
    color: orange;
    font-size: 30px;
}
/*点击*/
a:active{
    color: green;
}
/*访问过*/
a:visited{
    color: pink;
}

列表样式

/*
list-style
none 去掉
circle 空心圆
decimal 数字
square 正方形

<div id="nav">
    xxxxx
</div>

*/

ul li{
    height: 30px;
    list-sytle: none;
    text-indent: 1em;
}

背景

背景颜色
背景图片

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("xx.jpg");
        /*默认是全部平铺*/
        /*颜色 图片 图片位置 平铺方式*/
        background: red url("") 270px 10px no-repeat
           background-image: url("");
        background-repeat: ...;
        background-position: 122px 2px;
    }
/*
    background-repeat:repeat-x;
    只在第一行平铺
    repeat-y
    no-repeat
*/
</style>

渐变

Grabient

径向，圆形

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

盒子模型

margin：外边距
padding：内边距
border：边框

边框

border: 粗细样式颜色

body默认有默认的外边距

h1,ul,li,a,body{
    /*相当于初始化*/
    margin: 0;
    padding: 0;
    text-decoration: none;
}
div:nth-of-type(1) input{
    
}

外边距与div居中

居中（要求：块元素，有固定宽度！！img需要放在div中）

margin是顺时针，只有两个时，是上下和左右

margin: 0 auto

margin+border+padding+内容宽度

圆角边框

左上开始的顺时针方向

貌似就顺着填

div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
    /*半径，有时需要迁就长宽*/
}

阴影

div{
    box-shadow: 10px 10px 100px yellow
}

浮动

标准文档流

块级元素：独占一行

h1~h6 p div list...

行内元素：不独占一行

span a img strong...

行内元素可以被包含在块级元素中，反之不可以。

<!--
display: [];
    block 块元素
    inline 行内元素
    inline-block 是块元素，但是可以内联，在一行
    none 消失

float: [];
    left, right 行内左右浮动
clear: both 不贴着上一个浮动
-->

父级标签塌陷问题

<!--
clear: [];
    right 右侧不允许有浮动元素
    left
    both
    none
-->

增加父级元素高度

增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

overflow

在父级元素中增加一个 overflow: hidden;

父类添加一个伪类: after

#father:after{
    content: '';
    display: block;
    clear: both;
}

定位

border: dashed（虚线？）

相对定位

相对于自己原来的位置偏移

position: relative；

right: 20px;

....

绝对定位

仍然基于xx定位

position: absolution

没有父级元素定位的前提下，相对浏览器定位
父级元素存在定位，会相对于父级元素进行偏移
在父级元素范围内移动（好像可以出去？）

绝对的，不保留原来位置。

固定定位

position: fixed;

固定定位是固定在某个地方，浏览器向下移动页面也不动；

绝对定位是会动的。

z-index

（好像）定位，浮起来，才有层级的关系

0~n级图层，覆盖的问题

z-index: 10;

不透明度

opacity: 0.5;

filter: opacity(0.5);

后记

还有CSS预处理器：

SASS
LESS（功能简单，效率较低，但够用）

【学习笔记】CSS3

【学习笔记】CSS3

CSS3

快速入门

html文件中

外部引用（建议）

css的优势

css导入方式

选择器

基本选择器

高级选择器

层次选择器 - 不包括自己

结构伪类选择器

属性选择器（常用）

美化网页元素

字体样式

文本样式

阴影

超链接伪类

列表样式

背景

渐变

盒子模型

边框

外边距与div居中

圆角边框

阴影

浮动

父级标签塌陷问题

定位

相对定位

绝对定位

固定定位

z-index

后记

【学习笔记】JavaScript

【学习笔记】HTML5

Tarn

Comments | NOTHING

CSS3

快速入门

html文件中

外部引用（建议）

css的优势

css导入方式

选择器

基本选择器

高级选择器

层次选择器 - 不包括自己

结构伪类选择器

属性选择器（常用）

美化网页元素

字体样式

文本样式

阴影

超链接伪类

列表样式

背景

渐变

盒子模型

边框

外边距与div居中

圆角边框

阴影

浮动

父级标签塌陷问题

定位

相对定位

绝对定位

固定定位

z-index

后记

【学习笔记】JavaScript

【学习笔记】HTML5

Tarn

Comments | NOTHING

你想搜索什么...