学习笔记-CSS-基础1. 内联样式 inline style sheet 3. 外部样式表 external styl

什么是CSS

Cascading Style Sheets,层叠样式表
给网页中的每一个元素设置样式

文档

developer.mozilla.org/zh-CN/docs/…
查兼容性：caniuse.com/

书写格式

属性名要小写 color: red

如何应用到元素上- 引入方式

1. 内联样式 inline style sheet

<标签 style="属性名: 属性值;属性名: 属性值; ">内容</标签>
<h1 style="font-size: 50p;color:red">like</h1>

2.文档样式 document style sheet

结构样式分离

<head>
    <style>
        h1 {
            font-size: 50px;
            color:red;
        }
    </style>
</head>
<body>
    文档样式 document style sheet
    <h1>like</h1>
</body>

3. 外部样式表 external style sheet

外部新建css样式文件 ->style.css

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

html头部link ->注意引用地址

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

还可以使用 @import引入，但是它的效率比link元素低

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

元素直接使用

<body>
    外部样式表 external style sheet
    <h1>like</h1>
</body>

常见属性

1. color 前景色

文本颜色、边框、划线都会被影响

h1 {
    color: green;

    border-width: 10px;
    border-style: solid;
    text-decoration: line-through;
}

2. background-color 背景色

background-color: green;

3. letter-spacing/word-spacing 间距

字母间距
letter-spacing: 3px;
单词间距
word-spacing: 10px;
可以设置为负数
letter-spacing: -3px;

4. text-decoration 文本划线

none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。

text-decoration: line-through;

5. text-transform 文本大小写转换

/* 将所有字母转成大写 */
text-transform: uppercase;
/* 将每个单词首字母转成大写 */
text-transform: capitalize;
/* 将每个单词首字母转成小写 */
text-transform: lowercase;
/* 没有效果，默认 */
text-transform: none;

6. text-indent 文本缩进

设置第一行文本内容的缩进
类似字符实体
有em px rem这3种单位。rem(root em)根元素

text-indent: 2em;
text-indent: 32px;
text-indent: 2rem;

7. text-align 元素内容水平对齐方式

设置元素内容在元素中的水平对齐方式

text-align: left;
text-align: right;
text-align: center;

8.font-size 文字大小

使用 em px rem 作为单位，还可以使用百分比
1em 代表 100%，2em 代表 200%，0.5em 代表 50%，
rem == root em,一般设置在html中

font-size: 30px;
//em 在作用在font-size时，相对于父元素的的font-size * 2em
font-size: 2em;
font-size: 0.5em;
//百分比 基于父元素的font-size计算，这里就是 父元素的font-size * 50%
font-size: 50%;

9. font-family 字体样式

字体样式是基于操作系统是否支持这种字体

支持中英文写法

font-family: "Microsoft YaHei";
font-family: "微软雅黑";

为防止设置的字体操作系统不存在,会设置多种，最先写的优先级会高

font-family: 'Courier New', Courier, monospace;

英文字体只适合英文，中文字体同时适合中文和英文

所以如果在开发中，中英文使用不同的字体，应将英文字体写在前面，中文字体写在后面

10. font-weight 文字粗细

strong、b、h1~h6等标签 font-weight默认就是bold == 700

/* normal == 400 */
font-weight: normal;
/* bold == 700 */
font-weight: bold;

11. font-style 斜体

em、i、cite、address、var、dfn等标签 font-style 默认就是italic

//斜体，但是有个前提：这种font-family字体本身支持斜体
font-style: italic;
//文本斜体，直接文本倾斜显示
font-style: oblique;
//常规显示
font-style: normal;

12. font 缩写属性(复合属性)，可以写多个属性

weight style varien 可以随意换序，也可以省略
/line-heght 也可以省略；如果不省略必须跟在 font-size后面
font-size、font-family不可以换顺序，不可以省略

font-size: 30px;
font-family: '宋体';
font-weight: 700;
font-style: italic;
line-height: 50px;
font-variant: small-caps;
===
/* weight style varient  size/line-heght family */
font: bold italic small-caps 30px/50px '宋体';

/* weight style varient 可以省略 */
font: 30px/50px '宋体';

/* line-heght 也可以省略 */
font: 30px '宋体';

/* 错误写法 */
font: '宋体' 30px ;

13.line-height 行高

基线(baseline)：英文中底部的线，图中红色的线
行高：两文字基线(baseline)之间的间距。由图中可知：行高 = 文字高度 + 行距
有文本，行高才有意义

line-height 和 hieght 的区别

height：元素的整体高度
line-height：元素中每一行文字所占据的高度

假设div中只有一行文字，如何使这行文字上下居中

设置 height == line-height

CSS 选择器（selector）

什么是选择器

按照一定规则选出符合条件的元素，为之添加CSS样式

种类

选择器有好多

/* 通配选择器 */

效率低(遍历性。有些元素没有对应属性，强加上，影响效率)
一般给所有元素做一些通用性的配置

/* 通配选择器 */
* {
    color: red;

    margin: 0;
    padding: 0;
}

标签/元素选择器

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

类选择器

    .title1 {
            color: cyan;
    }
    <h1 class="title1" cla>like</h1>

一个元素可以有多个类,多个类以空格进行分割

    .title1 {
            color: cyan;
    }
    
    .large-font {
            font-size:20;
    }
    <h1 class="title1 large-font" cla>like</h1>

id 选择器

用 # 选取
和class类似，但是一般用于大门类划分
id在同一个页面不要重复(代码规范)

    //找到 id 为 body下面的 title类
    #body.title1 {
        color:red;
    }
    
     <div id="body">
        <h1 class="title1">like</h1>
    </div>

属性选择器

<style>   
    /* 所有含有title属性的     */
    /* /* [title] {
        color: green;
    } */
    title ==  one 的
    /* [title = "one"] {
        color: red;
    } */ */

    /* title中又 one的 */
    [title*="one"] {
        color: greenyellow;
    }

    /* 已one开头的 */
    [title^="one"] {
        color: greenyellow;
    }

    /* 以one结束的 */
    [title$="one"] {
        color: greenyellow;
    }
</style>

<body>
    <h1 title="one">kkk</h1>
    <h2 title="one 123">kkk</h2>
    <div title="334 one 5">kkk</div>
    <p title="123 one">kkk</p>
</body>

后代选择器 descendant combinator 重要

div 元素里面的span元素(包括直接、间接)

div span {
    color: red;
}

子选择器 child combinator 重要

div 元素里面的直接的span元素,不包括间接

div > span {
    color: red;
}

p里面不能包div，div能包p或者其他。同样在子选择器中 p>div 是错误

不单单支持标签，也支持类、属性

兄弟选择器 adjacent sibling combinator

div 元素后面紧挨着的 p 元素，且div和p必须是兄弟关系

div+span {
    color: red;
}

全兄弟选择器

div 元素后面的 p 元素，且div和p必须是兄弟关系

div~span {
    color: red;
}

交集选择器重要

同时符合多个条件的元素

并集选择器

只需其中一个或者多个条件的元素

伪类（pseudo-classes）

以 ' : ' 开头的类

常用伪类：动态伪类、结构伪类、否定伪劣
不常用伪类：目标伪类、语言伪类、元素状态伪类

常用伪类

动态伪类 dynamic pseudo classes

<style>   
    /* 链接未访问 */
    a:link {
        color: red;
    }

    /* 链接已访问 */
    a:visited {
        color: royalblue;
    }

    /* 鼠标停留到a上 */
    a:hover {
        color: saddlebrown;
    }

    /* 鼠标按住未松开到a上 */
    a:active {
        color: seagreen;

    }
</style>

hover必须放在 :link和:visited 之后才能完全生效
active必须放在 :hover 之后才能完全生效
注意：伪类编写顺序是固定的 link- visited- hover- active
记忆口诀：女朋友看见 lv 之后就哈哈大笑

:hover、:active 其他元素的应用

/* hover/active 其他应用 */
strong:hover {
    background-color: palegreen;
}

strong:active {
    font-size: 40px;
}

动态伪类 :focus 获取焦点

/* 当获取焦点时 */
input:focus {
    background-color: peru;
}

a:focus {
    background-color: yellow;
}

当有focus 时，编写顺序需要遵循： link- visited- focus- hover- active
记忆口诀：女朋友看见L(l)V(v)包包后疯(f)一样的哈哈(h)大笑(a)

/* 去掉聚焦状态 */ 假装去掉
a:focus {
    outline: none;
}
或者
<!-- 设置tabindex = -1 同样可以使a 不被聚焦 -->
<a tabindex="-1" href="https://wwww.baidu.com">百度一下</a>

细节：直接给a元素设置样式，相当于给元素的所有动态伪类都设置了

a {
    color: red;
}

== 相当于 link- visited- focus- hover- active都设置了red

结构伪类 structural pseudo classes

:nth-child(x) 父元素中的第x个元素

/* 是p元素，且是父元素中的第1个子元素， */
p:nth-child(1) {
    color: red;
}

其他写法

n: 0,1,2,3,4,5,6...

2n: 2,4,6,8.... 即偶数  

2n可以替换成 even 

2n+1: 1,3,5,7... 即奇数

2n+1可以替换成 odd

3n:1,3,6,9...

-n+5 负数，代表前几个 这里是前5个

nth-last-child(x) 父元素中倒数第x个元素

用法和:nth-child(x)一样
小测验，下面显示如何

nth-of-type() / nth-last-of-type

和 child()类似，不同的是nth-of-type() 只计算同种类型的元素

:nth-of-type() {

}

:nth-last-of-type() {

}

only-child/only-of-type

/* :only-child 父元素中的唯一子元素 */
body :only-child {
}

/* :only-of-type 唯一该类型的子元素 */
body :only-of-type {
}

empty

代表里面完全空白的元素

其他

:first-child == :nth-child(1)
:last-child == :nth-last-child(1)
:first-of-type == :nth-of-type(1)
:last-of-type == :nth-last-of-type(1)

否定伪劣 not pseudo classes

/* 表示除div以外的元素 */
:not(div) {

}

不常用伪类

/* :target是目标的意思，即目标伪类 */
:target {
    color: red;
}

/* disabled属于元素状态伪类 */
:disabled {
    color: red;
}

伪元素 pseudo-elements

可以用 : ，但是一般为了区分伪元素和伪类，建议使用两个冒号 ::

::first-line 第一行

p::first-line {
    font-size: 40px;

}

::first-letter 第一个字符

p::first-letter {
    color: #fff;
}

::before、::after

div {
    color: red;
}
div::before {
    必须要有content这个属性，内容可以空但是不能缺少
    content: "abcd";
}

div::after {
    /* 可以为图片 */
    content: url(../image/like.png);

    /* 可以添加其他属性 */
    background-color: redd
}

Tips

1.指定css文件编码

/*  指定css文件编码防止CSS解释失败 */
@charset "utf-8";

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

.font-t {
    font-family: "华文宋体";
}

2. 设置网页图标

link元素处理可以引用CSS文件，还可以设置网页图标
其中rel属性不能省略。而相应的type会默认确定，可以省略
图标格式一般是 ico、png，大小通常是1616、2424、32*32（px）

<link rel="icon" type="image/x-icon" href="http://www.jd.com.favicon/ico">

3.页面调试技巧

4. 颜色赋值(RGB)

//十进制
color: rgb(0, 0, 0);

//十六进制
color: #ff0000;

学习笔记-CSS-基础