第三周CSS学习内容

最新推荐文章于 2024-07-21 20:52:32 发布

留德青

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量185

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/2201_75364879/article/details/129466260

版权

第三周CSS学习内容

CSS简介

CSS:css是层叠样式表（Cascading Style Sheets）的简称，有时也会称之为CSS样式表或级联样式表。CSS是也是一种标记语言主要用于设置HTML页面的文本内容（字体、大小对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS语法规范：
- CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
- 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
- 属性和属性值以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性和属性值之间用英文“：”分开。
- 多个“键值对”之间用英文“；”进行区分。

CSS代码书写风格：紧凑格式：

h3 { color: deeppink;font-size: 20px;}

展开格式（建议使用）

h3 {
   color: pink;
   font-size: 20px;
}

CSS大小写都可以但强烈建议用小写。

选择器的使用

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。（HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义。）

语法:

...
<style>
     #zty {
        color: red;
     }
</style>  
...
<body>
    <div id="zty">卡啦米</div>
</body>

注意：id选择器中id只能调用一次，不能重复调用。

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示

语法：

...
<style>
     .zty {
        color: red;
     }
</style>  
...
<body>
   <ul>
      <li class="zty">小卡啦米</li> 
      <li class="zty">中卡啦米</li>
      <li>大卡啦米</li>
   </ul>
</body>

注意： ①类选择器使用“.” (英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的)。
②可以理解为给这个标签起了一个名字，来表示。
③长名称或词组可以使用中横线来为选择器命名。
④不要使用纯数字、中文等命名，尽量使用英文字母来表示。
⑤命名要有意义，尽量使别人一眼就知道这个类名的目的。

CSS创建

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

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

内部样式表

内部样式表是写到html页面内部，是将所有CSS代码抽取出来，单独放到一个

内联样式表

内联式样表实在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。

格式：

<div style="color: red; font-size: 12px;">青春不再，抓紧恋爱</div>

●style其实就是标签的属性
●在双引号中间，写法要符合CSS规范
●可以控制当前的标签设置样式
●由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
●使用行内样式表设定CSS，通常也被称为行内式引入

外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后吧CSS文件引入到HTML页面中使用。

引入外部样式表分两种：

新建一个后缀名为.css的样式表，把所有CSS代码都放入此文件中。
在HTML页面中，使用标签引入这个文件。
```
<link rel="stylesheet" herf="css文件路径">
```

css引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制多个页面

CSS背景

通过CSS背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定等。

背景颜色

实例：
```
body {background-color:red;}
```
CSS中颜色通常以以下方式定义：

十六进制：“#ff0000”

RGB:“rgb(2500,0,)”

颜色名称：“red”

背景图片

bacjkground-image==属性描述了元素的背景图片。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。

语法格式：

<style>
    div {
        width: 300px;
        height: 300px;
        background-image ；url (图片位置)
</style>

背景属性

	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

CSS文本

CSStext属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color属性用于定义文本的颜色。
```
div {
    color: red;
}
```
属性值
预定义的颜色如: red
十六进制如: ＃FF0000
RBG代码如: RGB(255,0,0)

	属性值
预定义的颜色	如: red
十六进制	如: ＃FF0000
RBG代码	如: RGB(255,0,0)

对齐文本

text-aligns属性用于设置元素内文本内容的水平对齐方式。
格式
```
div {
   text-align: center;
}
```
属性值
left 左对齐（默认值）
right 右对齐
center 居中对齐

属性值
left	左对齐（默认值）
right	右对齐
center	居中对齐

装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
格式：
```
div {
   text-decoration: underline;
}
```
属性值描述
none 默认
underline 下划线
overline 上划线
Line-through 删除线

属性值	描述
none	默认
underline	下划线
overline	上划线
Line-through	删除线

文本缩进

text-index属性用来指文本的第一行的缩进，通常是将段落的首行缩进。
格式：
```
siv {
   text-index: 10px;
}
```
相对于px，em是一个相对单位，就是当前元素一个文字大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小。

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

实例：

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

CSS字体

CSS字体属性定义字体，加粗，大小，文字样式。

CSS字形

在CSS中，有两种类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
- 特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
说明
Serif Serif字体中字符在行的末端拥有额外的装饰
Sans-serif "Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace 所有的等宽字符具有相同的宽度

	说明
Serif	Serif字体中字符在行的末端拥有额外的装饰
Sans-serif	"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace	所有的等宽字符具有相同的宽度

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

格式：

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

所有CSS字体属性

font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

CSS链接

四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
```
<style>
   a:link {
       color: red;
   }
   a:visited {
       color: green;
   }
   ....(以此类推)
</style>
```

CSS布局

元素居中对齐

要水平居中对齐一个元素(如

), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配

实例：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用
```
text-align: center;
```

图片居中对齐

要让图片居中对齐，可以使用margin：auto;,并把它放在块元素中。

img {
    display: block;
    margin: auto;
    width: 40%;
}

CSS盒子模型

所谓盒子模型：就是把HTML页面中布局元素看作是一个矩形盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素。它包括：边框，外边距，内边距，和实际内容。

盒子边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

边框简写：

border： 1px soild red;(没有顺序)

边框公开写法：

border-top: 1px solid red;(只是设定上边框，其余同理)

注意边框的层叠性（就近原则）
表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。
border-radius	设置圆角的边框。

盒子内边距(padding)

padding属性用于设置内边框，即边框与内容之间的距离
```
div{
   padding-left: 20px;
}
```
想设置对应的边框，只需要将left换成对应的字符就行。
padding属性可以有简写方式
- 代表上，右，下，左（顺时针）
```
div{
   padding: 10px 20px 30px 40px;
}
```
- 代表上，左右，下
```
div{
   padding: 10px 30px 40px;
}
```
- 代表上下，左右
```
div{
   padding: 10px 40px;
}
```
- 代表上下左右
```
div{
   padding: 10px ;
}
```

ps:行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

盒子外边距（margin）

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
具体内容跟外边距一样，只需把==“padding"换成"margin”==
外边距可以让块级盒子水平居中，但必须满足两个条件：
- 盒子必须指定了宽度
- 盒子左右的外边距都是设置为auto
```
.header { width:960px; margin:0 auto;}
```
- 常规写法：margin-left:auto; margin-right: 0 auto

margin:auto;

margin: 0 auto; (最常用)

CSS定位（position）

position 属性指定了元素的定位类型。

position 属性的五个值：

static定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

fixed定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动。

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

relative定位

相对定位元素的定位是相对其正常位置。

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

absokute定位

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

sticky定位

基于用户的滚动位置来定位。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

z-index属性

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）一个元素可以有正数或负数的堆叠顺序。

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

ps: 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

CSS布局

元素居中对齐

要水平居中对齐一个元素(如

), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配

实例：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用
```
text-align: center;
```

图片居中对齐

要让图片居中对齐，可以使用margin：auto;,并把它放在块元素中。

img {
    display: block;
    margin: auto;
    width: 40%;
}

左右对齐-使用定位方式

我们可以使用==position: absolute;==属性来对齐元素

CSS OVERFLOE

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

ps:overflow 属性只工作于指定高度的块元素上。

CSS组合选择符

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)：后代选择器用于选取某元素的后代元素。
子元素选择器(以大于 > 号分隔）：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
相邻兄弟选择器（以加号 + 分隔）：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
普通兄弟选择器（以波浪号～分隔）：后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

CSS3学习内容

CSS3边框

属性：

属性	说明
border-image	设置所有边框图像的速记属性。
border-radius	设置所有边框图像的速记属性。
box-shadow	附加一个或多个下拉框的阴影.

CSS3圆角

格式：

div
{
border:2px solid;
border-radius:25px;
}

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。(顺时针)
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影:

div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 边界图片

border-image 属性允许你指定一个图片作为边框，你可以使用图像创建一个边框。

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3 背景

CSS3 中包含几个新的背景属性:

background-image
background-size
background-origin
background-clip

CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

#zty { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

CSS3 background-size 属性

background-size指定背景图像像素或百分比的大小。

CSS3 的 background-origin 属性

background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。

 background-origin:content-box;

CSS3 多个背景图像

 background-image:url(img_flwr.gif),url(img_tree.gif);

CSS3 background-clip属性

CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

2D转换

留德青

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫