css学习记录(一)
本文最后更新于254 天前,其中的信息可能已经过时,如有错误请发送邮件到619701626@qq.com

CSS速查表

css元素放在style元素中,放在head元素末尾

<html>
    <head>
        xxxxxx
        xxxxxx
        <title></title>
        <style></style>
    </head>
    <body></body>
</html>

CSS有三种插入样式表的方法

分别是内联css、内部css和外部css

内联css

用来为一个单一的元素应用一个独特的样式

<body>
    <h1 style="color: blue; text-align: center;">xxxxx</h1>

    <p style="color: red;">
        xxxxx
    </p>
</body>

内部css

内部样式表一般定义在head元素中,通过style元素来定义,页面的样式均需要添加在style元素内部

这样样式声明到了html元素的外部

css选择器:用来寻找或选择你想要定义的HTML元素的

元素选择器

根据元素名称来选择HTML元素的

例如:

元素选择器

background-color:给页面的整体添加背景颜色

margin-left 用于定义h1标题元素位于父容器左侧的距离

弊端一:内部样式表只能用于一个界面
弊端二:需要不停上下滚动屏幕编辑,非常麻烦

解决方法:使用外部css,也叫外部样式
通过改变一个文件来改变整个网站的外观

外部css

外部样式,将css代码放在一个独立的、以.css为后缀名的文件中

使html页面结构文件和css样式文件完全独立开来

每个html页面都必须在head元素里添加link元素

<link>元素里定义rel属性,值为stylesheet,表示关联一个样式表

href 用于设置一个对外部样式表文件的引用,值为.css文件的路径

link

css样式的优先级

优先级

选择器类型

选择器类型

css简单选择器

简单选择器:根据名称、ID、类别来选择元素

css选择器是用来“寻找”或“选择”想要定义样式的HTML元素

元素选择器: 根据元素名称来选择HTML元素的

<style>
    p{
        text-align:center;         /段落p的内容均居中
    }
</style>

id选择器:使用一个HTML元素的id属性来选择一个特定的元素

id是唯一的

要选择一个具有特定id的元素,可以写一个#然后是该字符的id,比如#para2

id不能以数字开头

<style>
    #para2 {       id不能以数字开头
        text-align:center;
        font-style(声明字体风格):italic;      倾斜
    }
</style>
<body>
    <p id="para2">     id不能以数字开头
        id选择器
    </p>
</body>

类选择器:可以选择具有特定class属性的HTML元素

<head>
    <style>
        .italic {
            font-style:italic;
            text-decoration(声明文本修饰样式): underline;          下划线 
        }
    </style>
</head>
<body>
    <h1 class="italic">
        类选择器
    </h1>
    <p class="italic">
        类选择器
    </p>
</body>

如果同时需要两个类选择器,不用再定义一个新的class ,可以直接在上一个后面加空格再说明

例如: class="italic deco xxxxx xxxxx"

另外一种用法:p.italic {text-align; }

这样类选择器选择的元素就更加具体

只有p的样式被修改,h1里的样式不会改变

class的命名不能以数字开头

分组选择器 实现方法为将多个选择器哟个逗号分隔,如:h1,p{}

通用选择器: 选择页面上的所有HTML元素,方法:(*)

CSS组合选择器

通过一些特殊符号将多个简单选择器连接起来,就构成了组合选择器

再CSS种,组合选择器有4种:
1、后代选择器,通过空格连接
2、子选择器,通过大于号(>)连接
3、相邻的兄弟选择器,通过+号连接
4、一般兄弟选择器,通过~连接

后代选择器: 匹配作为指定元素后代的所有元素

div p {
    background-color: yellow     选择了<div>元素内的所有<p>元素
}

子选择器: 只能选择作为某元素的子元素,不能选择到孙辈的元素

div>p {
    background-color: yellow     选择了<div>元素内的所有<p>元素
}

CSS伪类选择器

属于类选择器中的一种,根据特定状态选取元素

基本语法:

selector(其他基础选择器):鼠标行为{
    color=red;
}

常用的伪类选择器有四个:
1、鼠标点击前 使用:link连接 代表鼠标没有操作元素时元素的默认样式
2、鼠标点击后 使用:visited连接 代表鼠标点击并离开元素之后的样式
3、鼠标悬停时 使用:hover连接 代表鼠标悬停或者是划过元素时元素的样式
4、鼠标点击时 使用:active连接 代表鼠标点击元素瞬间,元素现实的额样式

注意

伪类选择器也可以应用在其他元素上,但是只能实现active激活瞬间和hover鼠标悬停效果

<style>
            div {
            width: 200px;       /定义div块的宽度
            height: 200px;      /定义div块的高度
            background-color: skyblue;      /定义div块的背景颜色
        }

        div:hover {                 /悬停到div块时的样式
            background-color: red;      /定义div块的背景颜色
        }

        div:active {                /点击div块时的样式
            width: 100px;           /定义点击div块时的宽度
            height: 100px;          /定义点击div块时的高度
        }
</style>

伪元素选择器

通过伪元素选择器,可以设置元素指定部分的样式。主要用来设置元素内文本的首字母,首行的样式、或是在元素内容之前或者之后插入其他内容

基本语法为:

<style>
    selector(目标元素)::pseudo-element(向目标元素内,添加伪元素,并对伪元素的内容进行修饰) {
        color: red;
        font-size: 30px;
    }
</style>

伪元素选择器有五种:
1、::first-letter 用来实现向文本的首个字符,添加特殊样式
2、::first-line 用来实现向文本的首行添加特殊样式
3、::before 用来实现在元素内容之前插入内容
4、::after 用来实现在元素内容之后插入内容
5、::selection 用来更改选中文本的样式

在使用伪元素选择器向前向后插入内容时,必须配合content才能实现效果

selection伪元素选择器只支持一下几个样式声明:color(文本颜色),background(背景),cursor(鼠标样式),outline(描边效果)

CSS属性选择器

根据属性或者属性值来查找元素

基本语法:

Element(元素)[attribute(属性)]       查找带有该属性的元素,然后添加样式声明
Element[attribute="value"]      实现快速精准查找元素

例如:
a[target] {
    background-color: yellow 含义:查找带有target属性的a元素,并且为a元素添加了背景颜色为黄色的样式声明
}

CSS选择器的四种属性:
1、[attribute]:来查找HTML结构中,带有attribute属性的所有元素
2、[attribute=”value”]:来查找HTML结构中,带有attribute属性并且属性值为value的元素
3、[attribute~=”value”]:来查找HTML结构中,带有attribute属性并且在多个属性值中包含value的元素
4、[attribute|=”value”]:来查找HTML结构中带有attribute属性,并且属性值以value或者是value-开头的元素。

该属性的值只能有一个

CSS文本颜色和大小写转化

<h1>xxxx</h1>
<p>
    xxxxxxxxxxxxxxx
</p>
body {
    color: red;     一个页面的默认文本颜色是在body选择器中定义的
}

CSS强制转换文本中,单词和字母的大写和小写
使用 text-transfrom属性

p.transform {
    text-transform:属性
}

有三个属性: 这些属性主要用来设置英文的文本 ,对中文无效
uppercase:文本被转换为大写
lower: 文本被转换为小写
capitalize: 每个单词的首字母被转换为大写

CSS文本对齐和文本间距

文本对齐

水平对齐:

text-align: left(左对齐)、center(居中对齐)、right(右对齐)、justify(两端对齐)

垂直对齐:

vertical-align baseline(基线对齐)、text-top(文本顶部对齐)、text-bottom(文本底部)、sub(下角标对齐)、super(上角标对齐)

baselin 是基于四线三格中间行对齐的,对于英文文本才有意义

剩下四个

文本间距

text-indent 属性实现

使用长度值或者百分比来设置文本缩进,长度值可以使用绝对单位(50px)和相对单位(2em,就是两空格)

字符宽度如果是中文方块字,也可以称之为字体大小,通过font-size属性设置

百分比缩进是根据父元素的宽度计算得到的

litte-spacing 属性用于指定中文文字或者英文字母之间的空隙,也就是字间距

line-height 属性用于指定行与行之间的高度,也就是行高

三个常用属性值: 注意是属性值
normal: 也是默认值,浏览器会根据字符大小自动设置一个行高。
一个数字:比如 1.5,此数字与当前的字符大小相乘计算得到。
绝对值: 比如 20px,-5px,设置固定的行间距。

行高的计算

word-spacing 属性用于指定文本中单词的间距,只对英文有效
有一个常用的属性值nowrap 不管包含文本的元素宽度是多少,文本都不会换行.直到遇见br标签为止。

CSS文本装饰

下划线,删除线之类的颜色粗细

text-decoration-line 属性实现

具体的值有三个:
overline:在文本上方添加(上划线)
Line-through:在文本中间添加线条修饰(删除线)
underline:在文本下方添加线条修饰(下划线)

若要同时设置多个值,用空格隔开

h1 {
    text-decoration-line: overline line-through underline;
}

为文本设置装饰线的颜色通过text-decoration-color属性实现

为装饰线指定风格通过text-decoration-style属性实现
有五个属性值:
solid: 实线
double: 双实线
dotted: 圆点线
dashed: 虚线
wavy: 波浪线

通过text-decoration-thickness属性为线条设置厚度(线条的粗细)
有三个值:
auto:默认值
px: 像素大小,是一个绝对值
%: 是一个相对值

text-decoration是一个简写的属性

h4 {
    text-decoration: underline(text-decoration-line) red(text-decoration-color) double(text-decoration-style) 5px(text-decoration-thickness);
    四个顺序并没有要求,但是"text-decoration-line"必须设置
}

链接属性默认有下划线,如果要去除可以如下:

a {
    text-decoration: none;
}

CSS字体和自号

字体

使用font-family属性指定一个文本的字体,属性值为字体名称

英文字体分为五类:
第一类Serif有衬线字体
第二类Sans-serif无衬线字体
第三类Monospace单空格字体
第四类Cursive草书字体
第五类Fantasy幻想字体

中文通用字体有两个:微软雅黑、苹方简,分别应用于Windows系统和Mac系统

字号

通过font-size属性设定文本的大小,属性值可以为绝对大小(px)和相对大小(em/%)

相对大小em:会根据继承下来的父元素尺寸计算得到,如果元素嵌套的层数太多,计算起来就会太麻烦

所以可以使用rem这个相对单位,相对于根元素(html)

CSS字体风格和样式简写

font-style 指定字体样式
normal:文本正常显示
italic:文本斜体显示

font-weight属性指定了一个字体的粗细
属性值设置有两种方式:名称和数值

名称有四个:

lighter:细体
normal:正常字体
bold:加粗字体
bolder:更粗字体

数值则为:100,200,300…..900 值越大,文本越粗

名称和数值对应关系:

100——lighter
400——normal
700——bold
900——bolder

font-variant属性指定了文本是否应以小型大写字符显示

有两个值:normalsmall-caps(小型大写字母),只对英文有效
注意:如果文本本身写的是大写字母,则不生效

可以用font简写代码

a{
    font: oblique 100 small-caps 30px/30px 华文仿宋

    其中   font-size 和 font-family 这两个值是必须的
}

CSS谷歌字体和Icon图标

在应用font-family属性声明样式字体时,除了使用HTML中的标准字体外,还可以使用谷歌字体

要使用谷歌字体,只要在head元素里添加一个特殊的样式表链接

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia(字体名称)">
</head>
body {
    font-family: "Sofia", serif;
}

若要使用多个谷歌字体,只需用管道字符竖线(|)分隔字体名称

谷歌字体还能随心所欲的添加字体样式,在链接的字体后面添加& 定义effect=fire
然后给p定义class="font-effect-fire"

要引用多个样式,同样可以用管道字符竖线(|)

图标库网站,fontawesome.com

注册好之后,点击”Copy Kit Code”按钮
在 link 下面有键粘贴

在页面里三个段落的开头,添加3个i元素
全部定义class属性,可以分别设置值为
fas fa-cloud,fas fa-heart,fas fa-car
然后每个段落的开头就会出现一个小图标
更多的图标可以访问地址https://fontawesome.com

图标可以用style属性设置样式,比如color:red

觉得有帮助可以鼓励下博主哦~感谢!
作者:rainy
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0协议
转载请注明文章地址及作者哦~
上一篇
下一篇