css指层叠样式表（Cascading Style Sheets）是一组样式设置规则，用于控制页面的外观设计
###2、为什么要使用css实现内容与样式的分离，便于团队的开发样式服用，便于网站的后期维护页面的精确控制，让页面更精美
###3、css作用页面外观美化布局和定位
直接在标签的开始标签中，使用style属性。
<p style="color:red;">第一种引入css的方式</p>直接使用style标签来完成，在heed部分，添加style标签，注意，style标签要写在head部分，不要写到body里面了。
<!DOCTYPE html><html lang="en"><head> <meta chart="UTF-8"> <title>Document</title> <style> p{ color: red; } </style></head><body> <p>这是第二种引用的方法</p></body></html>将css作为一个独立的文件来保存，一般后缀.css，然后使用link标签引入。
<!DOCTYPE html><html lang="en"><head> <meta chart="UTF-8"> <title>Document</title> <link rel="stylesheet" href="method.css"></head><body> <p>这是第三种引用的方法</p></body></html>CSS样式(或规则)都必须由两部分组成：
选择器(lector)声明块(declaration)，包括属性(property)和属性值(value)注意：
声明块是由{}来构成的声明之间必须有一个分号，所以在写单个声明的>时* 候，尽量加上最后的分号声明的属性和属性值之间使用冒号隔开，在写这些符号的时候，要注意必须是英文的。
也称为元素选择器，使用HTML标签作为选择器的名称，以标签名作为样式应用的依据。
p{color: red;}a{font-size: 15px;}使用自定义的名称，以·号作为前缀，然后再通过HTML标签的CLASS属性调用类选择器，以标签的class属性作为样式应用的依据。
注意事项：
· 调用时不能添加.号
· 同时调用多个类选择器时，以空格分隔
· 类选择器名称不能以数字开头
.box{ font-size: 15px; }.......<div class="box">类选择器</div>使用自定义名称，以#作为前缀，然后通过HTML标签的ID属性进行名称匹配，以标签的id属性作为样式应用的依据，一对一的关系。
#top{ margin:10px }.......<div id="top">ID选择器</div>使用通配符 * 表示所有的标签（元素）。
使用*来去掉所有标签的margin和padding
*{ padding: 0; margin: 0;}在书写css的时候，有可能对两个不同的标签、class、id，设置相同的css。在css中，使用逗号来实现分组。两个选择器之间使用逗号进行分隔。
P,a{ font-size: 15px;}在某个选择器内部再设置选择器，通过空格隔开，只有满足层次关系最里层的选择器所对应的标签才会应用样式。
注意：使用空格时不区分父子还是后代，使用CSS梁静茹歌3中新增的 > 时必须是父子关系才行。
.box h2{ 茂密近义词 font-size: 15px;}........<div class="box"> <h2>父子选择器</h2></div>目前我们就掌握一个，最常用的，就是a标签的hover伪类。
hover，表示将鼠标放到a上面的这个状态。
a:hover{ color: red;}（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 必须写,能交换位置 。
（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 属性的值。
（1）border-collap ：属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示
parate ：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collap ：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。inherit ：规定应该从父元素继承 border-collap 属性的值
从日常生活中出发，在我们的HTML中，所有的标签都是矩形的。围绕着整个矩形，我们可以使用一系列的属性来控制它的显示外观。具体来说，有如下一些属性：
width: 宽度height：高度border：边框padding：内边距 补白margin：外边距 边界background：背景它们表示元素的宽度和高度。不是指整个盒子所占据的空间。在设置的时候，通常使用px来进行，如果要实现响应式，则可以使用百分比。
border右三部分构成 ：
边框的粗细 border-widht边框的样式 border-style边框的颜色 border-colorborder: 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;元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。
h1 {padding: 10px 0.25em 2ex 20%;}也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-toppadding-rightpadding-bottompadding-lefth1 { 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可以撑起男盒子的高度。
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-topmargin-rightmargin-bottommargin-leftmargin后面也可以跟一个值，二个值，三个值，四个值：
一个值：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可以设置负值
（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
本文发布于:2023-04-07 11:42:08，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/fa14b068089c0b2d1613894f116d9408.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css基本内容的总结.doc
本文 PDF 下载地址：css基本内容的总结.pdf
| 留言与评论（共有 0 条评论） |
