快速了解CSS常用样式(上)

1. CSS简介:

1.1 css

Cascading Style Sheets,层叠样式表。是一种用来结构化文档添加样式的计算机语言。

作用:修饰网页元素

语法(规则):由两个主要部分构成,选择器、声明

1.2 插入样式表的三种方式

  • 行内样式(写在标签上)

  • 内部样式(写head中)

  • 外部样式(创建一个.css文件,使用 link 引入到 html 文件中)

注:三种样式可以同时引用,但是有优先级,采取的规则是就近原则,行内>内部>外部。

2. 选择器

2.1 标签选择器

选择元素标签插入样式

2.2 id选择器

标有特定id的元素,css中id选择器以#进行定义,id名必须唯一

#fruit {
    font-size: 20px
}

2.3 类选择器

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

可以针对不同的标签进行分类,一个标签可以有多个类,多个类之间使用空格分开

.colorCls{
    color: pink;
}

选择器优先级:id选择器>类选择器>标签选择器

2.4 后代选择器

后代选择器用于选取某元素的后代元素,以空格分割。

header.nav ul li a {
            text-decoration: none;
            color: #614e3c;
            font-size: 14px;
        }

2.5 子元素选择器

>亲儿子选择器—只选择亲儿子,不选择孙子

div > p {
  background-color: yellow;
}

2.6 伪类选择器

  • 链接:

    • :hover—鼠标悬停,就是鼠标经过时

    • :active—鼠标点击时

    • :link—鼠标未访问

    • :visited—鼠标已访问

  • input表单:

    • :checked—选择选中的表单元素

    • :disabled—选择禁用的表单元素

    • :focus—选择获取焦点的表单元素

  • :not选择器—排除选择的元素以外的

  • :nth-child伪类选择器:

    • first-child:选择第一个子元素

    • last-child:选择最后一个子元素

    • nth-child(even):选择偶数行的子元素

    • nth-child(odd):选择奇数行的子元素

  • :nth-of-type 伪类选择器:

    • first-of-type:所选择的元素的父亲的第一个元素。

    • last-of-type:所选择的元素的父亲的最后一个元素。

    • nth-of-type(even):所选择的元素的父亲的偶数行的子元素

    • nth-of-type(odd):所选择的元素的父亲的奇数行的子元素

    nth-child和nth-of-child的区别:

    nth-child先看nth-child的排序,匹配到的标签如果与的第一个排序的标签不相匹配,不匹配代码执行不成功;

    nth-of-type先看前面的HTML标签,在看后面的nth-of-type排序,与排序的标签与前面的HTML标签相匹配,代码执行成功;

  • :before伪类选择器—在某个元素之前插入内容,其中content必须写在样式中

  • :after伪类选择器—在某个元素之后插入内容,其中content必须写在样式中

    注意:以上before 和 after 插入的都是内联元素

2.7 伪元素选择器

  • ::first-line伪元素: 用于向文本的首行添加特殊样式,只能应用于块级元素

    p::first-line {
      color: #ff0000;
    }
  • ::first-letter 伪元素:用于向文本的首字母添加特殊样式,只能应用于块级元素

    p::first-letter {
      color: #ff0000;
      font-size: 20px;
    }
  • ::before伪元素:可用于在元素内容之前插入一些内容

  • ::after伪元素:可用于在元素内容之后插入一些内容 ( 伪元素设置的宽高生效的是其父元素 )

  • ::selection伪元素:匹配用户选择的元素部分

2.8 +相邻元素选择器

匹配所有作为指定元素的同级后面的相邻元素。

div + p {
  background-color: yellow;
}

2.9 ~通用兄弟选择器

匹配指定元素的同级元素的后面所有元素。

2.10 *通配符选择器

通用选择器(*)选择页面上的所有的 HTML 元素。但仅仅只用于css格式化前去除页面内的内外边距。

* {
    padding:0;
    margin:0
}

2.11 并集选择器

以英文逗号 (,) 相隔开,可以同时对多个选择器进行相同的操作

div, p {
    color: #3377aa;
    font-size: 20px
}

2.12 属性选择器

  • 选择所有的类选择器的元素

ul li[class] {
    color: #333333;
}
  • 选择所有 class 类名为 nav的元素

ul li[class='nav'] {
    font-size: 14px;
}
  • 选择所有class类名中以 th 开头的元素

ul li[class^='th'] {
	background-color: #cccccc;
}
  • 选择所有class类名中以 th 结尾的元素

ul li[class$='th'] {
	height: 31px;
}

在CSS中,可以根据选择器的类型把选择器分为基础选择器复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素(标签)

  • 复合选择器是由两个或多个选择器,通过不同的方式组合而成的

  • 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

3. 文本格式

3.1 文本颜色

颜色属性用来设置文字的颜色。

  • 十六进制值—如:#FF0000

  • 一个RGB值—如:RGB(255, 0, 0)

  • 颜色的名称—如:red

ul li {
	color: #614e3c;
}

3.2 文本对齐方式

  • 水平方向对齐:text-align —left/center/right

ul li {
	text-align: center;
}
  • 垂直方向对齐:line-height

ul li {
    line-height: 20px;
}

3.3 文本修饰

text-decoration 属性用来设置或删除文本的装饰。

描述
none 删除文本下方的下划线
overline 在文本上方加入一条线
line-through 在文本中间横穿一条线
underline 在文本下方加入一条线

3.4 文本缩进

text-indent 属性时用来指定文本的第一行的缩进。

p {
    text-indent: 20px;
}

4. 背景

4.1 背景颜色

background-color 属性定义了元素的背景颜色.

5. 字体

5.1 字体系列

font-family 属性设置文本的字体系列。

p{font-family:"Times New Roman", Times, serif;}

5.2 字体样式

font-style 用于指定斜体文字的字体样式属性。

描述
normal 正常显示文字
italic 斜体,以倾斜字显示的文字
oblique 倾斜的文字,文字向一边倾斜。和斜体非常相似,但不支持
p {font-style:normal;}
p {font-style:italic;}
p {font-style:oblique;}

5.3 字体大小

font-size 属性设置文本的大小。

h1, p {
    font-size: 20px
}

5.4 字体粗细

font-weight 属性设置文字的粗细。

描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100 200 300 400 500 600 700 800 900 定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。
p {
    font-weight: 700;
}

6. 列表

list-style-type 可以对列表中的 li 元素指定列表项的标记类型。

none表示去掉 li 前面的小圆点或者数字。

li {
	list-style-type: none;
}

7. 表格

7.1 表格边框

指定css表格边框,使用 border 属性。

/* 使用语法 */
table, th, td {
    border: 边框宽度 边框样式 边框颜色;
}
/* 实例 */
table, th, td {
    border: 1px solid #000;
}

7.2 折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

7.3 表格宽度和高度

width 和 height 属性定义表格的宽度和高度。

table {
    width: 100%;
}
th {
    height: 50px;
}

7.4 表格文本对齐方式

  • text-align 属性设置水平对齐方式,left center right

td {
    text-align: right;
}
  • vertical-align 属性设置垂直对齐方式,top center bottom

td
{
    height:50px;
    vertical-align:bottom;
}

8. 盒子模型

CSS盒子模型本质上就是一个盒子,它包括:边距 (margin),边框 (border),填充 (padding)和实际内容 (content)。

  • padding

内填充或内边距,设置时可以设置4个方向,按照顺时针方向设置(上右下左)。

padding:50px; /* 四个方向都是50px */
 padding:50px 60px; /*上下50px 左右60px */
 padding:50px 60px 70px; /*上50px 右60px 下70px 左60px */
 padding:50px 60px 70px 80px; /*上50px 右60px 下70px 左80px */
  • border—边框

三要素:宽度 样式 颜色

设置时,可以设置4个方向,按照顺时针方向设置(上右下左)

/*border-top-style: solid;
  border-top-width: 20px;
  border-top-color: chocolate; */
/* border-top的简写*/  
 border-top:20px solid chocolate;
/* border-left的简写*/  
 border-left:20px solid chocolate;
/* border-right的简写*/  
 border-right:20px solid chocolate;
/* border-bottom的简写*/  
 border-bottom:20px solid chocolate;
/* 终极简写 */
 border: 1px solid red;
  • margin—外边距,可以设置四个方向的值(上右下左)

margin-top: 10px; 
margin-right: 10px; 
margin-bottom: 10px; 
margin-left: 10px; 
/* 简写顺序:上右下左 */
margin: 10px 20px 30px 10px;

CSS 中的盒子模型包括 标准盒子模型IE 盒子模型

  • 标准盒模型: 一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)

标准盒子模型添加padding内边距或border边框后,宽高都会进行相应增长;标准盒子模型使用box-sizing: content-box 定义。

  • 怪异盒模型: 一个块的总宽度 = width + margin(左右)( width 包含 padding 和 border 值)

怪异盒子模型添加padding或者border,会从中减少content内容的占据区域,来为padding和border制造空间,宽高不会相对应的进行增长。IE盒子模型使用box-sizing: border-box 定义。

9. 文本溢出

9.1 文本溢出

overflow 属性用于控制内容溢出元素框时显示的方式。

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

overflow 只在指定高度的块元素上使用。

auto是当内容超出规定宽高的时候出现滚动条

scroll不论内容是否超出都会显示滚动条

9.2 省略号显示

省略号显示满足的四个条件:

  • 容器要是块级元素且有固定的宽高

  • 文本强制在一行显示 white-space: nowrap;

  • 超出的文本隐藏 overflow: hidden;

  • 让隐藏的文本变省略号 text-overflow: ellipsis



文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出 文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出 文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出 文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出 文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出 文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出

10. 浮动

10.1 传统网页布局的三种方式

网页布局的本质—用 CSS 来摆盒子,把盒子放到响应的位置。

CSS 提供了三种传统的布局方式:

  • 标准流

  • 浮动

  • 定位

10.2 标准流

所谓标准流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。

10.3 为什么需要浮动

有很多的时候,标准流没有办法完成,此时就可以利用浮动完成布局,因为浮动可以改变元素标签默认的排列方式。最典型的就是多个块级元素一行内排列显示。

10.4 什么是浮动

float 属性用于创建浮动框,将其移动到一遍,直到左边缘或有边缘触及包含块或另一个浮动的边缘。

属性值 描述
none 元素不浮动(默认)
left 元素向左浮动
right 元素向右浮动

10.5 浮动的作用

  • 可以让多个块级元素同行使用

  • 用浮动来控制图片,使其可以实现文字环绕的效果

10.6 浮动溢出

浮动溢出 ( 高度塌陷 ) 是因为在很多情况下父元素的盒子不方便直接给高度,但是子盒子在浮动之后不再占据原来标准流的位置了,导致父元素的盒子为0,影响后面元素的布局。

10.7 清除浮动

清除浮动的本质是清除浮动元素造成的影响。如果父盒子本身有高度,可以不用清理。清除浮动之后,父盒子会根据浮动的子盒子自动检测高度,父级有了盒子就不会影响下面的标准流了。

清除浮动的策略是闭合浮动

10.7.1 额外标签法

额外标签法,也称为隔墙法,是 W3C 推荐的做法。额外标签法会在浮动元素的末尾添加一个空的标签,并添加清除浮动的样式。

原理是:clear的作用是设置元素左右两边不允许存在浮动元素。

语法:选择器{clear:属性值};

属性值 描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响

在实际工作中,几乎只用 clear: both

浮动1
浮动2

10.7.2 父级添加 overflow

可以给父级添加 overflow 属性,将其属性值设置为 hiddenautoscroll

原理:因为 overflow: hidden 触发了 BFC,计算BFC高度时,浮动元素也参与计算。

优点:代码简洁。

缺点:无法显示溢出的部分。

10.7.3 ::after 伪元素法

::after 方式是额外标签法的升级版,也是给父元素添加。

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
    /* 隐藏元素显示,但元素的位置保留. */
	visibility: hidden;
}

.clearfix {
	/* ICE6、s7专有 */
	zoom: 1;
}

优点:没有增加额外标签,结构更简单

缺点:不能照顾低版本浏览器

代表网站:百度、淘宝、网易

10.7.4 双伪元素清除浮动

也是给父元素添加。

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
    /* ICE6、s7专有 */
	*zoom: 1;
} 

优点:代码更简洁。

缺点:不能照顾低版本浏览器

代表网站:小米、腾讯

11. 定位

11.1 为什么需要定位

  • 某个元素可以自由的在一个盒子内移动位置,并且可以压住其他盒子

  • 当我们滚动窗口时候,盒子是固定在屏幕某个位置的

11.2 定位组成

定位:将盒子定在某一位置,所以定位也是在白方盒子,按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

  • 定位模式

语义
static 静态定位(默认)
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
  • 边偏移

偏移量属性 描述
top 顶端偏移量,相对于其父元素上边线的距离
bottom 底部偏移量,相对于其父元素下边线的距离
left 左侧偏移量,相对于其父元素左边线的距离
right 右侧偏移量,相对于其父元素右边线的距离

11.3 静态定位

静态定位时元素的默认定位方式无定位的意思。(无偏移量)

语法:选择器{ position: static;}

11.4 相对定位

相对定位时元素在移动位置的时候,是相对于它原来的位置来说的。

语法:

选择器{ 
    position: static;
    top: xxx;(bottom: xxx)
    left: xxx;(right: xxx)
}

特点:

  • 它是相对于自己原来的位置来移动的

  • 相对定位不会脱离标准流

11.5 绝对定位

绝对定位的元素的位置相对于最近的已定位父元素如果元素没有已定位的父元素,那么它的位置相对于html

语法:

选择器{ 
    position: static;
    top: xxx;(bottom: xxx)
    left: xxx;(right: xxx)
}

特点:

  • 如果其上面没有父盒子或者父盒子没有定位,则以浏览器为准

  • 如果上面的父盒子有定位(相对、绝对、固定),则以最近一级的父亲为准

  • 绝对定位会脱离标准流

12. 按钮

12.1 按钮制作

  • button 标签

button {
	width: 60px;
	height: 40px;
	font-size: 17px;
	border-radius: 3px;
	border: 1px solid #ccc;
}
  • input 标签,将 type 改为 button

input {
	width: 70px;
	height: 40px;
	border-radius: 4px;
	font-size: 17px;
	border: 1px solid #ccc;
}

12.2 禁用按钮

  • 可以使用 disabled 属性禁用按钮


  • 可以设置opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果,并添加 cursor 属性并设置为 not-allowed 来设置一个禁用的图片

.disabled {
    /* 透明度 */
    opacity: 0.6;
    /* 设置鼠标的样式为不可点 */
    cursor: not-allowed;
}

12.3 图像按钮

可以将 input 的 type 属性设置为 image,并为其添加 src 属性添加图片路径。

13. 圆角

在 CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法:border-radius:length;

  • 参考值可以是数值百分比的形式

  • 该属性是一个简写属性,可以跟四个值,分别代表左上角右上角右下角左下角

  • 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

  • 兼容 ie9+ 浏览器支持,但是不会影响页面布局,可以放心使用

14. 阴影(图片、文字、盒子)

14.1 文字阴影

在 CSS3 中,我们可以使用 text-shadow 属性将阴影应用于文本。

/* 语法*/
text-shadow: h-shadow v-shadow blur color;
描述
h-shadow 必需。水平阴影的位置,允许负值
v-shadow 必需。垂直阴影的位置,允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色
span{
	font-weight: 700;
    font-size: 26px;
    text-shadow: 5px 5px 5px rgb(130, 128, 128);
 }

14.2 盒子阴影

在 CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影。

/* 语法*/
text-shadow: inset h-shadow v-shadow blur spread color;
描述
inset 可选。将外部阴影outset(默认)改为内部阴影
h-shadow 必需。水平阴影的位置,允许负值
v-shadow 必需。垂直阴影的位置,允许负值
blur 可选。模糊的距离
spread 可选。阴影的尺寸
color 可选。阴影的颜色
/* 1. 综合写法 */
div.shadowBox {
	width: 300px;
    height: 200px;
    background-color: #eee;
    /* 水平 垂直 模糊距离 颜色 */
    box-shadow: 5px 5px 5px #aaa;
    margin-top: 20px;
}  
/* 2.单边效果 */
.demo1 {
    box-shadow: 
    /* 左边阴影 */
    -2px 0 0 green,
    /* 顶部阴影 */
    0 -2px 0 blue,
    /* 底部阴影 */
    0 2px 0 red,
    /* 右边阴影 */
    2px 0 0 yellow;
}
/* 3.四边具有相同的阴影效果*/
/* 只设置模糊半径和颜色值*/
.demo2 {
     box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}
/* 4.四边具有相同的阴影效果*/
/* 只设置扩展半径和颜色值 */
.demo3 {
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.5);
}

14.3 图片内阴影

  • 方法1:将 img 放到一个 div 中,对父元素 div 进行 box-shadow 内阴影效果,再对 img 进行相对定位,并让其在父元素下一层。

div.shadowImg {
	width: 150px;
    height: 210px;
    margin-top: 20px;
    box-shadow: inset 0px 0px 8px #3b3a3a;
}
        
div.shadowImg img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1;
}
  • 方法2:在 img 父元素上使用 ::before 伪元素实现。

div.shadowImg2 {
    width: 150px;
    height: 210px;
    margin-top: 20px;
    position: relative;
}
        
div.shadowImg2::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: inset 0px 0px 8px #38dc11;
}

div.shadowImg2 img {
    width: 100%;
    height: 100%;
    z-index: -1;
}

你可能感兴趣的:(css,css3,前端)