css基本内容的总结

程序员文章站 2024-01-18 15:18:52

css基本内容的总结一、css简介1、什么是csscss指层叠样式表（Cascading Style Sheets）是一组样式设置规则，用于控制页面的外观设计###2、为什么要使用css实现内容与样式的分离，便于团队的开发样式服用，便于网站的后期维护页面的精确控制，让页面更精美###3、css作用页面外观美化布局和定位二、引入css的三种方法1、行内样式直接在标签的开始标签中，使用style属性。

第一种引入cs...

css基本内容的总结

一、css简介

1、什么是css

css指层叠样式表（Cascading Style Sheets）

是一组样式设置规则，用于控制页面的外观设计
###2、为什么要使用css

实现内容与样式的分离，便于团队的开发

样式服用，便于网站的后期维护

页面的精确控制，让页面更精美
###3、css作用

页面外观美化

布局和定位

二、引入css的三种方法

1、行内样式

直接在标签的开始标签中，使用style属性。

<p style="color:red;">第一种引入css的方式</p>

2、内部样式

直接使用style标签来完成，在heed部分，添加style标签，注意，style标签要写在head部分，不要写到body里面了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是第二种引用的方法</p>
</body>
</html>

3、外部样式

将css作为一个独立的文件来保存，一般后缀.css，然后使用link标签引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="method.css">
</head>
<body>
    <p>这是第三种引用的方法</p>
</body>
</html>

三、css基本语法

CSS样式(或规则)都必须由两部分组成：

选择器(selector)
声明块(declaration)，包括属性(property)和属性值(value)

注意：

声明块是由{}来构成的

声明之间必须有一个分号，所以在写单个声明的>时* 候，尽量加上最后的分号

声明的属性和属性值之间使用冒号隔开，

在写这些符号的时候，要注意必须是英文的。

四、选择器

1、基础选择器

1.1 标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称，以标签名作为样式应用的依据。

p{color: red;}
a{font-size: 15px;}

1.2 类选择器

使用自定义的名称，以·号作为前缀，然后再通过HTML标签的CLASS属性调用类选择器，以标签的class属性作为样式应用的依据。
注意事项：
· 调用时不能添加.号
· 同时调用多个类选择器时，以空格分隔
· 类选择器名称不能以数字开头

.box{
        font-size: 15px;
    }

.......

<div class="box">类选择器</div>

1.3 ID选择器

使用自定义名称，以#作为前缀，然后通过HTML标签的ID属性进行名称匹配，以标签的id属性作为样式应用的依据，一对一的关系。

#top{
        margin:10px
    }

.......

<div id="top">ID选择器</div>

2、选择器用法

2.1 通用选择器

使用通配符 * 表示所有的标签（元素）。
使用*来去掉所有标签的margin和padding

*{
    padding: 0;
    margin: 0;
}

2.2 分组选择器

在书写css的时候，有可能对两个不同的标签、class、id，设置相同的css。在css中，使用逗号来实现分组。两个选择器之间使用逗号进行分隔。

P,a{
    font-size: 15px;
}

2.3 父子选择器

在某个选择器内部再设置选择器，通过空格隔开，只有满足层次关系最里层的选择器所对应的标签才会应用样式。
注意：使用空格时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行。

.box h2{
    font-size: 15px;
}

........

<div class="box">
    <h2>父子选择器</h2>
</div>

2.4 伪类选择器

目前我们就掌握一个，最常用的，就是a标签的hover伪类。
hover，表示将鼠标放到a上面的这个状态。

a:hover{
    color: red;
}

五、css的常见属性

1、字体（font）属性

属性	含义	属性值
font-style	设置字体是否倾斜	normal、italic
font-weight	设置字体是否加粗	normal、bold、bolder、100、200、…、900
font-size	设置字体大小
font-family	设置字体类型
color	设置字体颜色

（1） font-style : 设置字体是否倾斜

narmal : 默认值，浏览器显示一个标准的字体样式。

italic ：浏览器会显示一个斜体的字体样式。

inherit ：从父元素继承字体尺寸。

（2） font-weight : 设置字体是否加粗

normal ：默认值，定义标准的字符。

bold ：定义粗体字符。

bolder ：定义更粗的字符。

100、200、…、900 ：定义由粗到细的字符，400等同于normal，700等同于bold。

inherit ：从父元素继承字体尺寸。

（3）font-size : 设置字体大小

谷歌浏览器默认是16px 用的最多是的12px 和 14px 。

单位也可以用em，1em=16px。

inherit ：从父元素继承字体尺寸。

（4）font-family : 设置字体类型

和用户电脑上设置的字体也有关系。

font-family:A,B,C,D

（5) font是上面的几个属性的复合属性

font : font-style font-weight font-size/line-height font-family。
font-style font-weight 可以不写,也可以交换位置。
font-size/line-height font-family 必须写,能交换位置。

2、文本（text）属性

属性	含义	属性值
line-height	设置行高	normal、inherit、number、length
text-align	对齐元素中的文本	left、right、center、inherit
text-decoration	向文本添加修饰	none、underline、overline、line-through、inherit
text-indent	缩进元素中文本的首行	length、inherit、%
direction	设置文本方向	ltr、rtl、inherit

（1）line-height ：属性设置行间的距离（行高）

normal : 默认值，设置合理的行间距。

inherit ：规定应该从父元素继承 line-height 属性的值。

number ：设置数字，此数字会与当前的字体尺寸相乘来设置。

length ：设置固定的行间距。

（2) text-align ：属性规定元素中的文本的水平对齐方式

left ：把文本排列到左边，默认值。

right ：把文本排列到右边。

center ：把文本排列到中间。

inherit ：规定应该从父元素继承 text-align 属性的值。

（3）text-decoration属：性规定添加到文本的修饰

none ：默认，定义标准的文本。

underline ：定义文本下的一条线。

overline ：定义文本上的一条线。

line-through ：定义穿过文本下的一条线。

inherit ：规定应该从父元素继承 text-decoration 属性的值。

（4）text-indent ：属性规定文本块中首行文本的缩进

length ：定义固定的缩进，默认值：0。

% ：定义基于父元素宽度的百分比的缩进。

inherit ：规定应该从父元素继承 text-indent 属性的值。

（5）direction ：属性规定文本的方向/书写方向

ltr ：默认。文本方向从左到右。

rtl ：文本方向从右到左。

inherit ：规定应该从父元素继承 direction 属性的值。

3、列表（list）属性

属性	含义	属性值
list-style-image	将图象设置为列表项标志	URL、none、inherit
list-style-type	设置列表项标志的类型	none、disc、circle、square等

4、表格（table）属性

属性	含义	属性值
border-collapse	设置分隔单元格边框的距离	separate、collapse、inherit
border-spacing	设置表格标题的位置	length length、inherit

（1）border-collapse ：属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示

separate ：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse ：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit ：规定应该从父元素继承 border-collapse 属性的值

5、盒子模型

从日常生活中出发，在我们的HTML中，所有的标签都是矩形的。围绕着整个矩形，我们可以使用一系列的属性来控制它的显示外观。具体来说，有如下一些属性：

width: 宽度
height：高度
border：边框
padding：内边距补白
margin：外边距边界
background：背景

css基本内容的总结

（2）width和height

它们表示元素的宽度和高度。不是指整个盒子所占据的空间。

在设置的时候，通常使用px来进行，如果要实现响应式，则可以使用百分比。

（3） border边框

border右三部分构成：

边框的粗细 border-widht
边框的样式 border-style
边框的颜色 border-color

border: 1px solid red;

border的边框可以分开设置：border-top、border-right、border-bottom、border-left。

border-top: 1px solid #000;
border-right: 1px solid red ;
border-bottom: 1px solid #00f;
border-left: 1px solid #0f0;

（4）padding内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

例如，所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

h1 {padding: 10px;}

还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。

h1 {padding: 10px 0.25em 2ex 20%;}

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

padding-top
padding-right
padding-bottom
padding-left

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

注意点：
1）有些标签是有默认的padding 如ul ol… 等，{padding:0; }可以消除所有标签的padding
2）对于行内元素来说，padding在垂直方向上不影响行高，效看似是有padding，但是padding不是真正的padding，或者说一个女盒子来说，padding在垂直方向上无效。
3）对于块级元素来说，上下padding可以撑起男盒子的高度。

（5）margin外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

margin-top
margin-right
margin-bottom
margin-left

margin后面也可以跟一个值，二个值，三个值，四个值：

一个值：margin:10px 四个方向的margin都是10px
二个值：margin:10px 20px; 上下是10px 左右是20px
三个值：margin:10px 20px 30px; 上是10px 左右是20px 下30px
四个值：margin:10px 20px 30px 40px; 上右下左

注意点：
1）有此标签有默认的margin ,*{ margin:0; padding:0>}可以消除所有标签的margin
2）对于行内元素来说，margin在垂直方向上是无效的
3）margin可以设置auto。表示尽可以大 div{ margin:0 auto; }
4）margin可以设置负值

（6）背景（background）

属性	含义	属性值
background-color	设置元素的背景颜色	color_name、hex_number、rgb_number、transparent、inherit
background-image	把图像设置为背景	url(‘URL’)、none、inherit
background-position	设置背景图像的起始位置
background-repeat	设置背景图像是否平铺	repeat、repeat-x、repeat-y、no-repeat 、inherit
background-attachment	背景图像是否固定或者随着页面的其余部分滚动	scroll、fixed、inherit

（1）background-color ：属性设置元素的背景颜色

color_name ：规定颜色值为颜色名称的背景颜色（比如 red）。

hex_number ：规定颜色值为十六进制值的背景颜色（比如 #ff0000）。

rgb_number ：规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0））。

transparent ：默认值，背景颜色为透明。

inherit ：规定应该从父元素继承 background-color 属性的设置。

（2）background-image ：属性为元素设置背景图像

url(‘URL’) ：指向图像的路径。

none ：默认值，不显示背景图像。

inherit ：规定应该从父元素继承 background-image 属性的设置。

（3）background-position ：属性设置背景图像的起始位置

top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right，如果您仅规定了一个关键词，那么第二个值将是"center"，默认值：0% 0%。

x% y% ：第一个值是水平位置，第二个值是垂直位置，如果您仅规定了一个值，另一个值将是 50%。

xpx ypx ：第一个值是水平位置，第二个值是垂直位置，如果您仅规定了一个值，另一个值将是50%。

（4）background-repeat ：属性设置是否及如何重复背景图像

repeat ：默认，背景图像将在垂直方向和水平方向重复。

repeat-x ：背景图像将在水平方向重复。

repeat-y ：背景图像将在垂直方向重复。

no-repeat ：背景图像将仅显示一次。

inherit ：规定应该从父元素继承 background-repeat 属性的设置。

（5）background-attachment ：属性设置背景图像是否固定或者随着页面的其余部分滚动

scroll ：默认值。背景图像会随着页面其余部分的滚动而移动

fixed ：当页面的其余部分滚动时，背景图像不会移动。

inherit ：规定应该从父元素继承 background-attachment 属性的设置。

本文地址：https://blog.csdn.net/qq_49310434/article/details/107290566

上一篇：一条语句涵盖SQL查询

下一篇： GIT 常用命令

css基本内容的总结

css基本内容的总结

一、css简介

1、什么是css

二、引入css的三种方法

1、行内样式

2、内部样式

3、外部样式

三、css基本语法

四、选择器

1、基础选择器

1.1 标签选择器

1.2 类选择器

1.3 ID选择器

2、选择器用法

2.1 通用选择器

2.2 分组选择器

2.3 父子选择器

2.4 伪类选择器

五、css的常见属性

1、字体（font）属性

2、文本（text）属性

3、列表（list）属性

4、表格（table）属性

5、盒子模型

（2）width和height

（3） border边框

（4）padding内边距

（5）margin外边距

（6）背景（background）