前端学习笔记CSS

样式

内联样式（不推荐）

又称之为行内样式将样式直接写在元素的style属性上

CSS样式之间试用;隔开，建议每条样式后都加上分号;
缺点：因为是单个元素设置样式，不方便维护。

<div style="color: red; background: blue">测试</div>

文档样式表（常用）

又称之为内嵌样式表

只能影响到单个界面，别的界面无法调用此样式
将样式写在head标签中的style标签中
style的type默认是text/css，所以可以不写

<head>
	<meta charset="UTF-8">
	<style>
		div{
  		color: red;
      background: blue;
		}
	</style>
</head>

外部样式表（常用）

将样式单独写在CSS文件中，如果某个网页想调用此样式，则在当前网页的head元素中用link元素引用

在CSS中试用@charset来指定文件编码，一般使用UTF-8

布局

width

设置宽度

div{
  width: 200px;
}

height

设置高度

div{
  height: 200px;
}

padding

内边距

div{
  padding: 20px;
}

div{
  padding: 20px 10px 20px 10px;
}

margin

外边距

div{
  margin: 20px;
}

div{
  margin: 20px 10px 20px 10px;
}

如果想让块级元素水平居中，则将margin-left 和 margin-right 设置为auto

margin: 0 auto;

margin-top传递

如果块级元素的顶部线和块级父元素的顶部线重叠，那么这个块级元素的margin-top的值会传递给父元素

margin-bottom传递

如果块级元素的底部线和块级父元素的底部线重叠并父元素的高度为auto，那么这个块级元素的margin-bottom的值会传递给父元素

解决上下margin传递问题

给父元素或者子元素设置为inline-block

给父元素设置podding-top或者podding-bottom

给父元素设置边框

建议

margin一般设置兄弟元素之间的间距

padding一般设置父子元素之间的间距

margin折叠

垂直方向上相邻的2个margin（margin-top margin-bottom）有可能合并成一个margin

如何防止折叠

只设置其中一个元素的margin

条件允许，使用padding取代margin

其他

float

让元素向某个方向浮动

div{
  float: left;
}

border

边框

p {
	  border:5px solid red;
  }

border-radius

圆角

outline

外轮廓

不占用空间，默认显示在border的外面

box-shadow

阴影

// box-shadow:水平偏移 垂直偏移 模糊半径 延伸距离 颜色 内框阴影
box-shadow: 10px 20px 30px 15px raba(0,0,0,0.1) inset；

text-shadow

文字阴影

box-sizing

用来设置盒子模型中的宽高行为

content-box 默认方式 width height不包括padding margin
border-box 宽高包括padding margin

transition

动画

transition:all 1s;

display

修改元素类型

block 让元素显示为块级元素
inline 让元素显示为行内级元素
none 隐藏元素（元素直接消失，不占据任何位置）
inline-block 让元素同时具备行内级、块级元素的特征

跟其他行内元素同一行显示

可以随意设置宽高

宽高默认由内容决定

visibility

能控制元素的可见性

visible 显示元素
hidden 隐藏元素（元素不可见，但是还是占据位置）

overflow

用于控制内容的溢出行为

visible 溢出的内容照样可见
hidden 溢出的内容隐藏
scroll 内容可以滚动
auto 会自动根据内容是否溢出决定是否可以滚动

transform

形变

ratate 旋转

水平居中

行内元素 inline-block

在父元素中设置text-align:center

块级元素

margin: 0 auto

文字

font-size

设置文字大小

常用设置

具体数值+单位

如 100px

也可以使用em作为单位：1em代表100%，2em表示200%，0.5em代表50%

百分比

基于父元素的font-size计算，如50%相当于父元素的font-size的一半

一般给网页的body设置font-size代表网页字体的默认大小，其他元素一般是基于父元素设置字体大小（若需求整个网页字体整体放大只要更改body中的font-size就可以了）

span{
  font-size: 14px;
}

font-family

设置字体名称

可以设置多个字体，按照顺序从左到右使用，若设备上没有左边第一个字体，就会选择第二个字体，以此类推。
一般来说，英文字体只支持英文，中文字体可能适用于英文，所以如果想中文和英文设置不同的字体，需要把英文字体放在左边，以免让英文适配了中文字体

@font-face

让网页支持网络字体（自定义字体）

<style>
  @font-face{
    /* 字体位置，也可设置多个字体*/
		src：url(fonts/mini_cut.ttf),url(fonts/mini.ttf);
    /* 字体名字 */
    font-family:"自定字体";
  }
</style>

div{
  font-family: "自定字体";
  font-size: 30px;
}

font-weight

是指文字的粗细

设定值100 200 400 .... 900
nomal = 400
bold = 700

div{
  font-weight：100;
}

font-style

设置字体的常规、斜体显示

常用是指

normal：常规显示
italic：用字体的斜体显示（字体自带斜体显示）
oblique：文本倾斜显示（不管字体支不支持斜体都使用倾斜显示）

font-variant

影响小写字母的显示

常用值

normal：常规显示
small-caps：将小写字母替换为缩小过的大写字母

font

缩写属性

line-height

行高

可设置具体数值 40px

可设置百分比 200% 最终行高时百分比乘以元素的字体大小

具体数值 1、1.5 最终行高是数字乘以元素的字体大小

normal 默认一般在1到1.2之间

文本

text-decoration

用于设置文字的装饰线

letter-spacing

设置字符之间的间距

word-spacing

设置单词之间的间距（挨在一起没有空格）

text-transform

大小写之间的转换

text-indent

首行缩进

一般不使用px而是使用em

相对单位

em:相对于font-size来计算，2em就相当于font-size * 2；

绝对单位

px

p{
  text-indent: 2em;
}

text-align

是指标签内容在标签中的水平对齐方式

表格

list-style-type

设置li元素前的标记样式

list-style-image

设置某张图片当做li元素前的标记，会覆盖list-style-type的设置

list-style

缩写属性

border

设置表格每个单元格的边框样式

border: 1px solid black;

border-collapse

合并单元格的边框

.main-table {
    border-collapse: collapse;
  }

border-spacing

设置单元格的水平垂直间距

border-spacing: 10px 20px;

背景

background-color

用来显示背景颜色

div{
  background-color: red;
}

bakcground-image

背景图片

background-image: url("images/banner.jpg")

background-repeat

背景平铺属性

repeat 默认平铺
no-repeat 不平铺
repeat-x 只在水平方向平铺（可以用于按钮背景不是纯色，然后1像素图片进行平铺防止拉伸）
repeat-y 只在垂直方向平铺（可以用于按钮背景不是纯色，然后1像素图片进行平铺防止拉伸）

background-size

背景图大小

// 100px 200px
background-size: 100px 200px;

// 宽自动计算 高200px
background-size: auto 200px;

// 宽高200px 高自动计算
background-size: 200px auto;
background-size: 200px;

backgroun-position

图片在水平、垂直方向的位置

backrround-position: 60px 80px;

水平方向可设置的值 left center right
垂直方向可设置的值 top center bottom
如果只设置了一个方向，另一个方向是center

精灵图

通过background-position来定位图片，达到显示想要显示的图片

background-attachment

设置背景图片依附在什么标签上

scroll 默认值，随着元素一起滚动，元素在哪里背景图片就在哪里
local 背景图片更随元素内容一起滚动
fixed 背景图片相对于浏览器窗口固定（比如用于网页背景）

background

背景属性缩写

定位

选择器

元素选择器

将某一类别的元素全部选中

div{
  /* 选择文件中所有的div设置字体大小为10px */
  font-size: 10px;
}

通用选择器

将文件中的所有元素全部选中

*{
  /* 选中文件中所有的元素设置间距 */
  padding: 10px;
  margin: 10px;
}

id选择器

通过元素的id来选择元素

<html>
  <head>
    <meta charset="UTF-8">
    <title>我是标题</title>
    <style>
      /* 将id为one的元素的背景设置为红色*/
      #one {
        background-color: red;
      }
      
    </style>
  </head>
  <body>
    <div>我是div</div>
    <div id="one" >我是div</div>
    <div>我是div</div>
  </body>
</html>

class选择器

选择到同一个类的元素

一个元素可以拥有多个class值，每个class值间通过空格来隔开

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是标题</title>
  <style>
    /* 将id为one的元素的背景设置为红色*/
    .one{
      background-color: red;
    }
    .main{
      font-size:40px;
    }
  </style>
</head>
<body>
  <div class="main one">我是div</div>
  <div class="main">我是div</div>
  <div class="main">我是div</div>
  <div>我是div</div>
</body>
</html>

属性选择器 (不常用)

选择拥有某个属性的所有元素

[herf]{
  color: red;
}

[herf="one"]{
  color: red;
}

[herf~="one"]{
  color: red;
}

组合

多有的选择器都可以组合起来混合使用

后代组合

/* 选择div里面的所有span元素 (直接或者间接) */
div span{
  color: red;
}
/* 选择div里面的p的所有span元素 (直接或者间接)*/
div p span{
  color：blue;
}

<span>文字内容1</span>
<div>
	<span>文字内容2</span>
	<p>
			<span>文字内容3</span>
	</p>
<div>

子组合

/* 选择div元素里的span元素 （不包括间接元素）*/
div>span{
  color: red;
}
/* 选择div元素里的p元素里面的span元素 （不包括间接元素）*/
div>p>span{
  color: red;
}

<span>文字内容1</span>
<div>
	<span>文字内容2</span>
	<p>
			<span>文字内容3</span>
	</p>
<div>

相邻兄弟组合

/* 选择div后面紧挨的p元素 （div和p必须是兄弟关系）*/
div+p{
  color: red;
}

<p>文字内容1</p>
<div>
  <p>文字内容1</p>
</div>
<p>文字内容1</p>
<p>文字内容1</p>

全体兄弟组合

/* 选择div后面的所有p元素 （div和p必须是兄弟关系）*/
div~p{
  color: red;
}

<p>文字内容1</p>
<div>
  <p>文字内容1</p>
</div>
<p>文字内容1</p>
<p>文字内容1</p>

交集组

/* 所有同时符合2个条件的元素 （是div元素并且class值有one） */
div.one{
  color: red;
}

/* 所有同时符合3个条件的元素 （是div元素并且class值有one并title的值是test） */
div.one[title="test"]{
  color: red;
}

<div class="one">文字内容1</div>
<div class="two">文字内容2</div>
<div class="one title="test"">文字内容3</div>

并集组

/* 只要符合这3个条件的其中一个就可以了 */
div, one, [title="one"]{
  color: red;
}

/* 上面的相当于下面这种情况的简写 */
div {
  color: red;
}
one {
  color: red;
}
[title="one"] {
  color: red;
}

<div>我是div</div>
<span>我是span</span>
<p>我是p</p>

伪类

动态伪类

使用举例

a:link 未访问链接

a:visited 已访问链接

a:hover 鼠标移动到链接上

a:active 激活状态（鼠标在链接上长按）

a:link{
  color: red;
}
a:visited{
  color: blue;
}
a:hover{
  color: yellow;
}
a:active{
  color: green;
}

除了a元素，:hover、:active也能用在其他元素上

focus (聚焦)

input: focus 当前拥有输入焦点的元素

/* 当文本框聚焦时文字变为红色 */
input:focus{
  color: red;
}

结构伪类

:nth-child()

从父元素的第一个开始计数

父元素的第一个子元素

:nth-child(2n) (n:任意正整数和0)父元素的偶数个子元素

2n+1 父元素的奇数个子元素

3n 父元素的3的倍数个

:nth-last-child()

从父元素的最后一个开始计数，其他与:nth-child()一样

:nth-of-type()

span:nth-of-type(3) 父元素的第3个span类型的标签

从最前一个开始计数

:nth-last-of-type()

从最后一个开始计数

first-child

等同于:nth-child(1)

last-child

等同于:nth-last-child(1)

only-child

父元素中的唯一子元素

:empty

元素里完全空白

否定伪类

:not(x)

括号中是一个简单的选择器

:not(x)表示除x以外的所有的元素

伪元素

::first-line

给首行文本设置属性

::first-letter

给第一个字符设置属性

在元素的前面插入内容

::after

在元素的后面插入内容

特性

继承
层叠
优先级

!important > 内联 > id > class、属性、伪类 > 元素 > 通用

posted @ 2020-08-14 08:52 cmg123 阅读(148) 评论(0) 收藏举报

刷新页面返回顶部

cmg123

初心易得，始终难求。

前端学习笔记CSS

样式

内联样式（不推荐）

外部样式表（常用）

布局

width

height

padding

margin

float

border

border-radius

outline

box-shadow

text-shadow

box-sizing

transition

display

visibility

overflow

transform

水平居中

文字

font-size

常用设置

font-family

@font-face

font-weight

font-style

常用是指

font-variant

常用值

font

line-height

文本

text-decoration

相关值

letter-spacing

word-spacing

text-transform

相关值

text-indent

text-align

相关值

表格

list-style-type

list-style-image

list-style

border

border-collapse

border-spacing

背景

background-color

bakcground-image

background-repeat

background-size

backgroun-position

精灵图

background-attachment

background

定位

选择器

元素选择器

通用选择器

id选择器

class选择器

属性选择器 (不常用)

组合

后代组合

子组合

相邻兄弟组合

全体兄弟组合

交集组

并集组

伪类

动态伪类

结构伪类

否定伪类