个人自学前端6-CSS1

目录

CSS

层叠样式表,用来表现HTML等文件样式的计算机语言。

CSS版本

  1. CSS1: 1996年12月17日成为W3C推荐标准，该版本中提供了有关文字、颜色、位置和文本属性等基本信息。
  2. CSS2: 1998年5月,样式单得到了更多的充实。
  3. CSS3: 1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。各浏览器厂商对CSS3的支持也在不断的完善中。

HTML中使用CSS有三种方式：

  1. 标签中使用style属性。行间样式也叫作内联样式
<div style='width: 100px; height: 100px; background: red;'></div>
  1. 使用<style>标签。通常我们把<style>标签放在<head>标签中,也叫作内部样式。
<!-- 02 内部样式 -->
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: blue;
        }
    </style>
  1. 外部.css文件，使用<link rel="stylesheet" href="">引入到HTML文档中。推荐使用
<!-- 03 外部样式-->
    <link rel="stylesheet" href="./css/01.css">

CSS 三大特性

  1. 继承性:给父元素设置的属性,子孙元素也可以使用。
  2. 层叠性:层叠性只有在多个选择器中选择同一个标签,然后又设置了相同的属性,才会发生层叠。
  3. 优先级:当多个选择器选择同一个标签,并且给同一个标签设置属性时,如何层叠由优先级来决定.

导入外部样式表到当前

各引入方式优先级： 内联样式 > 内部样式 - 外部样式 > 浏览器默认样式

  • @import 
@import url("global.css");
@import url(global.css);
@import "global.css";

CSS语法

为HTML标签设置一组样式也可以叫作设置CSS规则。CSS规则中必须包含选择器和一条及以上的声明。

  • 在CSS中可以使用 /* */为样式添加注释。

CSS规则会有叠加的效果，优先级高的规则将覆盖优先级低的规则。同等优先级情况下后面的将覆盖前面的。

CSS选择器

要为HTML标签元素设置样式需要先选中该元素，使用css选择器可以选中HTML标签。

  • 标签选择器（元素选择器）

    • E 以HTML中元素名称作为选择符
    h2{background:red;}
p{background:red;}
div{background:blue;}

  • ID选择器

    • # 以HTML标签中id属性的值作为选择符（唯一）。
    #box1{color:red;}
#box2{color:red;}

  • 类别选择器

    • .以HTML标签中class属性的值作为选择符（可匹配多个）。
    .box1{color:green;}
.box2{color:green;}

  • 属性选择器

    • [att] 具有att属性的元素
    • [att="val"] 选择具有att属性且属性值等于val的E元素。
    • [att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的元素。
    • [att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

  • 通配符 * 选定所有HTML标签

复合选择器

复合选择器有两个及以上的选择器组合而成，也叫作组合选择器。

关系选择器

  • E F后代选择器：匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) ，不需要相匹配元素之间要有严格的父子关系。
  • E>F子元素选择器：匹配那些作为第一个元素的直接后代(子元素)的第二元素.
  • E+F相邻兄弟选择器：当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

选择器优先级：描述越具体优先级越高
!important 提升指定样式条目的应用优先权

选择器优先级

在这里插入图片描述

  1. ！important
    在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。
  2. 行内样式，在style属性里面写的样式。
  3. id选择器
  4. class选择器
  5. 标签选择器
  6. 通配符选择器*
  7. 浏览器的自定义属性和继承

单位取值

长度

  • px 像素。绝对长度单位
  • in 英寸。绝对长度单位
  • cm 厘米。绝对长度单位
  • mm 毫米。绝对长度单位
  • q 1/4毫米。绝对长度单位
  • pt 点。绝对长度单位。
  • pc 派卡。绝对长度单位。相当于我国新四号铅字的尺寸

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px 。绝对长度单位在使用时需要慎重。常用的绝对长度单位是px因为在前端的视觉稿.psd 通常都是以像素为单位绘制的。

  • em 相对于当前对象内文本的字体尺寸。 相对长度单位
  • rem 相对于根元素(即html元素)font-size计算值的倍数。相对长度单位
  • %用的多！！！可用于响应式布局。

颜色

  • Color Name 用颜色关键字来指定颜色。如：black、white、red、green...
  • HEX 十六进制记法。如：#rrggbb或#rgb
  • RGB rgb(R,G,B),三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。
  • RGBA rgba (R,G,B,A) 在rgb基础之前增加了A 。A： Alpha透明度。取值0 - 1之间。

常用属性

继承性：CSS中部分为HTML标签设置属性样式给继承给子级标签。

背景

  • background 设置标签的背景。简写属性
    • 标签可以使用颜色或图片作为背景
background: #ffffff url("/i/photo/tree.png") no-repeat fixed right top;

在使用简写属性时，属性值的顺序为：

1.background-color
2.background-image
3.background-repeat
4.background-attachment
5.background-position

在 CSS属性中有大量的 简写属性也叫作复合属性，这些简写属性可以将多条样式规则合并为一条，以提高书写效率，让编码更加简洁。

  • background-color 设置标签的背景颜色。
  • background-image 设置标签的背景图像。
  • background-repeat设置是否及如何重复背景图像。
可能的值 描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
  • background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
可能的值 描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
  • background-position设置背景图像的起始位置。
可能的值 描述
top right bottom left center 如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。写两个。
x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。
  • background-clip 属性规定背景的绘制区域。
值 描述
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
  • background-origin 属性规定 background-position 属性相对于什么位置来定位。
值 描述
border-box 背景图像相对于边框盒来定位。
padding-box 背景图像相对于内边距框来定位。
content-box 背景图像相对于内容框来定位。
  • background-size 属性规定背景图像的尺寸。
值 描述
length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

边框

  • border 定义元素边框的外观特性。简写属性

    • border-width
    • border-style（必需）
    • border-color
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

  • border-style 属性指定要显示的边框类型。允许以下值：

    • dotted - 定义点线边框
    • dashed - 定义虚线边框
    • solid - 定义实线边框
    • double - 定义双边框
    • groove - 定义 3D 坡口边框。效果取决于 border-color 值
    • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
    • inset - 定义 3D inset 边框。效果取决于 border-color 值
    • outset - 定义 3D outset 边框。效果取决于 border-color 值
    • none - 定义无边框
    • hidden - 定义隐藏边框

  • border-radius 属性用于向元素添加圆角边框。

轮廓

outline ：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline:#00ff00 dotted thick;

文本

  • color 指定颜色。

    • 常用取值：Color Name、HEX、RGB

  • font-size 定义元素的字体大小

  • font-family 定义元素文本的字体名称序列

  • font-weight 定义元素文本字体的粗细

    • normal： 正常的字体。相当于数字值400
    • bold： 粗体。相当于数字值700。
    • bolder： 定义比继承值更重的值
    • lighter： 定义比继承值更轻的值
    • 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

  • font 简写属性。定义元素的文本特性。

    • 语法：font：[ [font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar
    • 使用font属性参数必须按照如上的排列顺序，且font-size和font-family必须填写。每个参数仅允许有一个值。不建议用。

  • text-transform 定义元素的文本如何转换大小写

    • none： 无转换
    • capitalize： 将每个单词的第一个字母转换成大写
    • uppercase： 将每个单词转换成大写
    • lowercase： 将每个单词转换成小写

  • white-space 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。

  • text-align 定义元素内容的水平对齐方式

  • text-indent 定义块内文本内容的缩进

  • letter-spacing 属性用于指定文本中字符之间的间距，用的少

  • word-spacing 属性用于指定文本中单词之间的间距，用的少

  • vertical-align 定义行内元素在行框内的垂直对齐方式

  • text-decoration 定义元素文本装饰

  • line-height 属性用于指定行之间的间距

  • text-shadow 属性向文本设置阴影。

    • 语法：text-shadow: h-shadow v-shadow blur color;
    • 水平阴影的位置，垂直阴影的位置，模糊的距离，阴影的颜色
    • 例：h1 {text-shadow:2px 2px 8px #FF0000;}

列表

  • list-style 设置列表项目相关内容

表格

  • border-collapse 设置或检索表格的行和单元格的边是否合并在一起

盒子模型

CSS盒模型有：内容（Content）、内边距（Padding）、边框（Border）、外边距（Margin）组成。
在这里插入图片描述

盒子的宽度： 内容+ 内边距 + 边框

为元素设置宽、高

  • width 设置元素宽度
  • min-width 最小宽度
  • max-width 最大宽度
  • height 设置元素高度
  • min-height 最小高度
  • max-height 最大高度

内外边距

  • margin 为元素设置上右下左的外边距 ,复合属性。
    • 四个参数：上、右、下、左
    • 三个参数：上、左右、下
    • 两个参数：上下、左右
    • 一个参数：上右下左

margin参数取值：auto 根据父级容器自动计算位置。多用左右两侧边距计算。可以让元素居中显示。

/* box元素将在父元素中居中显示 */
.box{
    width:100px;
    margin:0 auto;
}
  • margin-top 设置元素上外边距
  • margin-bottom 设置元素下外边距
  • margin-right 设置元素右外边距
  • margin-left 设置元素左外边距
  • padding 为元素设置所有四个方向（上右下左）的内边距，复合属性

padding的值为四、三、二、一个时规则与margin一至。

  • padding-top 设置元素上内边距
  • padding-bottom 设置元素下内边距
  • padding-right 设置元素右内边距
  • padding-left 设置元素左内边距

固定行宽度，超出文本显示为 ...

p{
    border: 1px solid gray;
    width: 100px;
    /* 文本不换行 */
    white-space: nowrap;
    /* 超出文本隐藏 */
    overflow: hidden;
    /* 文本隐藏时显示 ... */
    text-overflow: ellipsis;
}

多行显示，超出部分显示...

-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.

p {
    width: 100px;
    height: 100px;
    border: 1px solid gray;
    display: -webkit-box;
    -webkit-line-clamp:3; /*限制当前块级元素中的内容的行数*/
    -webkit-box-orient: vertical;
}

-webkit-line-clamp参考文档

外边距重叠

  • 外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）
  • 原因：当一个元素包含另一个元素时，假设没有padding或border把外边距分隔开，他们的上/下外边距就会发生合并。 父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
  • 相邻元素可为父子元素或同胞元素。
  • 折叠后的margin计算
    • margin都是正值时取较大的margin值
    • margin都是负值时取绝对值较大的，然后负向位移。
    • margin有正有负，从负值中选绝对值最大的，从正值中选取绝对值最大的，然后相加
  • 解决方案：
    • 改为padding
    • 对于父子元素，内层元素加 float:left或display:inline-block;
    • 外层父元素加透明边框 border:solid 1px transparent;
    • 内层元素绝对定位 position:absolute;
    • 设置为BFC布局

外边距穿透

  • 父级元素没有边框才能穿透
  • 穿透只有上下，左右没有穿透问题
  • 解决方案：
    • 加高度
posted @ 2021-06-24 09:58  暗鸦08  阅读(32)  评论(0)    收藏  举报