css学习

最新推荐文章于 2024-05-30 13:20:27 发布

qq_51467754

最新推荐文章于 2024-05-30 13:20:27 发布

阅读量539

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_51467754/article/details/118889730

版权

css

css层叠样式表

HTML表达结构，CSS表达样式

样式和内容/结构是分离的

主要的样式分为全局样式和内嵌样式

背景样式

背景样式是全局的，可以在< body >中加style修改

<body style="backgroud-color:black">
    ...
</body>

需要什么颜色就用什么颜色的英文，也可以加上light表示亮灰亮红等等颜色，transparent表示透明

也可以使用rgb或者rgba格式表示

rgb:

style="backgroud-color:#FF0000"

rgba:

style="backgroud-color:rgba(255,255,0,0)"

rgba的最后一格表示当前区块颜色填充的透明度

以图片作为背景

style="background-image:url(./QQ图片20210321170230.jpg)"

这样背景就会变成图片，图片过小不够展示全部页面的时候会自动进行填充，我们也可以指定填充的方式：

style="background-image:url(./QQ图片20210321170230.jpg);background-repeat:repeat-x"

这样就表示在x方向上进行填充，我们也可以选择在y方向也可以选择不填充（no-repeat），两个background的属性之间用；连接

背景位置

style="background-image:url(./QQ图片20210321170230.jpg);
background-repeat:repeat-x;
background-position:left top"

这样表示这个把背景图片在网页的左上角，这个是位置的方位表示法，也可以用坐标表示法：

background-position:100px 100px

这样就表示这个图片放在（100，100）的位置

背景图片不随页面滚动而滚动（背景固定）

background-attachment:fixed

如果不加这一条那么背景图片默认是跟页面一起上下滚动的，加了的话背景就会被固定下来

段落

文字颜色

<p style="color:red">123</p>

缩进

<p style="text-indent: 2em">123</p>

em表示当前段落字符的大小，2em就表示2个字符的大小

也可以用英尺（in)厘米（cm)以及50%这种

px表示像素点

悬挂缩进：

<p style="text-indent: 2em";padding:2em>
123<br>
456<br>
789<br>
</p>

这样的效果就是123缩进4格，然后456以及789缩进两格，

在这里插入图片描述

行间距：

line-hight:1.5

后面加数字单位都可以，加normol表示正常间距

对齐：

text-align:left

文本靠左靠右靠中间对齐，还有一个两端对齐justify

单词间间距：

wordspacing:10px

这个基本只适用于英文字符，因为是单词之间的距离，所以说这个必须要有空格（单词间的距离其实就是空格的距离），改的其实是空格的距离

字符间间距：

letter-spacing:10px

区别于单词间间距，这个字符间距就是不用空格的，改的就是每个字符之间的距离，不是单词间空格的距离

类型转换：

text-transform:

后面可以加：

1.uppercase 将所有英文字符变成大写的

2.lowercase 将所有英文字符变成小写的

3.capitalize 将单词的首字母大写

划线：

text-decoration:

underline 下划线

overline 上划线

line-through 中间穿过去的线

三种线可以结合，一起划出来

空格回车样式：

white-space:

normal:默认的情况，这时候会把多个空格视作是一个空格，回车也会被当作一个空格,(有自动卷绕）

pre: 有多少个空格就是多少个空格，回车也就是回车，不会被当作空格，并且会不做自动卷绕，自动卷绕的意思就是左右拉动这个界面，每行文字的个数会自动补齐成当前的宽度

pre-wrap:有自动卷绕的pre，文字会随页面宽度变化而调整

nowrap:不会做自动卷绕，并且会把多个空格视作是一个空格，回车也会被当作一个空格，就是一整行不会变的文字

pre-line：空格会合并，回车就是回车，并且保留自动卷绕

文字书写方向：

direction:

rtl:从右边到左边

但是其实没有什么用的，汉字和英文的书写顺序都不会被改变，会被改变的只有最后一行的最后一个符号以及文字贴合的方向，rtl是贴合在界面右边。

字体

font-family:

后面可以加两种类型的

1.通用系列（大类）：

1.serif 有衬线字体

2.sans-serif 西文中没有衬线的字体

3.monospace 等宽字体

4.cursive 类手写字体

5.fantasy 无法归类的字体，可能是符号

上面的是给出字体的大类，并不是给出详细的字体比如宋体黑体等等

2.详细字体

直接加详细的字体，比如黑体 hei

可以写多种字体在里面，作为后备字体，例如：

font-family:Times,TimesNR,serif

这样就会先选第一种，如果浏览器找不到的话就会接着去选第二种

字体设计

font-style:

italic:斜体字

obique:倾斜的文字

font-variant:

small-caps:将英文字符变成小号的大写字符

font-weight:

bold:表示字体加粗

也可以使用100-900之间的数字表示加粗的程度

font-size:

1em表示正常的默认的大小，也可以用绝对的大小表示例如（10px 10个像素点）

效果

1.阴影

text-shadow:

有四个值，分别表示阴影在x,y,z方向上的延伸，以及阴影的颜色，就比如

3px 5px 5px #000000

阴影也可以叠加，中间用；连接

3px 5px 5px #000000；0px 2px 3px rgba(255,0,255,0.5)

2.轮廓边框

outline-color:
outline-style:
outline-width:

分别是边框颜色，边框样式以及边框宽度

边框样式中可以选：solid（实线），dotted（点状轮廓），double(双实线)等等

边框宽度可以写：1.thin thick 2.直接写个数字，表示几个像素点

列表

1.改前面点的样式

list-style-type:

disc:实心圆

circle:空心圆

square:方形

2.将前面点变为图片

list-style-image:url()

写法也可以合并直接写成list-style：

并且后面是没有顺序的要求的，于背景不同

表格

1.改变边框的样式

border:1px solid blue

表示边框是1个像素点宽，实线，蓝色

2.将边框的边线合并：

border-collapse:collapse

collapse表示多条边线会合并起来，默认的是seperate(分开的)

3.格子的宽和高

height和width，可以直接改，并且一改就是一整行或者一整列一起改

4.格子中文字的对齐（需注意这边水平方向和竖直方向的对齐是要分开来定义的）

竖直方向：

vertical-align:top

水平方向：

text-align:right

5.文字与边框之间的距离：

padding:10px

6.表格分配样式

1.默认的自动分配

table-layout:automatic

自动分配的单元格宽和高，是根据每个格子的存放的字符的数量来进行自动计算单元格的宽高

对于数据较大的表格会很浪费时间

2.由表格首行首列来决定每个单元格的宽高

table-layout:fixed

框模型（在段落p，表格等等都可以使用）

边框距离：（padding不能为负值）

padding:

可以指定四个方向的各个的距离：

padding-top:10

也可以一起进行指定：

padding:10 15 20 25

按照上右下左的顺序进行书写

元素间的距离：

margin:

这个指的是两个元素之间的距离，就是整个框模型之间的距离

也是可以一起指定或者分开方向指定（按照上右下左的顺序）

要注意的是这个如果两个元素都指定了与对方元素之间的距离，那么这个时候网页会采取他们最大的那个距离而不是它们的距离之和，就比如第一个段落指定了与下方第二段的距离是50，第二段指定与上方的距离是20，那么最终他们的距离是50而不是70

定位（块）

就是写一个块模型，然后在这个页面给他定位一个位置

<div>
...
</div>

有三种定位的方法：

普通流（默认，相对定位）浮动绝对定位

用position进行块模型的定位：

position:

有五种值：

相对定位：

1.static 不会受top,left这种影响，就是默认的定位方法，就是这东西该在哪就在哪

2.fixed 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动

3.relative 可以使用left,top这种是元素产生偏移

绝对定位：

4.absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< body >，就是相对于这个浏览器的界面

粘性定位：

5.sticky 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

浮动定位：float

这个不是position的值，这个不是position的值，这个不是position的值

浮动定位就是这个块可以在界面放缩时随着界面的放缩左右移动，直到他的边框碰到另一个块元素

，如果碰到了就会把别的块元素往下面或者某个方向挤下去

样式选择器

1.元素选择器：

<body>
    <tr>
        <th style="border:1px solid blue">111</th>
    </tr>
    <tr>
        <td style="border:1px solid blue">222</th>
    </tr>
</body>

改成：

<head>
    <style>
        th,td {border:1px solid blue}
    </style>
</head>

这样的话所有的th以及td的样式都被改变了（多个标签可以一起被修改，中间用逗号隔开），注意是要在head里面加style才行

不仅thtd可以p，div这种也可以

2.类选择器

<head>
    <style>
        *.a {color:red}
    </style>
</head>
<body>
    <p class="a b">
        123<br>
    </p>
</body>

*. a表示所有标签从属于a这个类的样式都是这个，如果把 * 改成p等等标签，那么只有那个标签并且从属于a这个类的样式会被改变
定义一个标签从属于某个类使用class，后面可以加多个类的名字，之间用空格隔开

3.id选择器

与类选择器相似，就是把 . 改成了#，并且后面不是类而是id（相当于名字）

*#a {color:red}
...
<p id="a b">

4.属性选择器

*[title] {color:red}

表示所有有title这个属性的元素的样式被改变

5.后代选择器

 th em {color:blue}
 ...
<tr>
    <th>
        1234<em>5</em>6789
    </th>
</tr>

这样表示th中标签em的元素被修改，中间用空格隔开是选择某个标签的后代的标签的元素，之间用逗号隔开的是直接选择这个标签的元素进行修改

用空格的这种后代选择器，只要后代有那个标签，无论是多少层的后代，样式都会被修改

但是如果使用的是 > :

th > em {color:blue}

这样就表示th的下一代，只能是下一代的em被修改，如果说em外部再嵌套一层那么就能被修改了

6.兄弟选择器

<style>
    h1 + p {background-color:red}
</style>
...
<h1>123</h1>
<p>
    456
</p>
<p>
    789
</p>

d=“a b”>




**4.属性选择器**

```html
*[title] {color:red}