css

CSS

Cascading Style Sheets 层叠样式表

用于控制html标签样式

注释

/*单行注释*/
/*
多行注释1
多行注释2
*/

通常写css的时候,都会写一个单独的css文件,里面只有css代码

/*这是小米网站首页的css样式文件*/

/*通用样式*/

/*导航条样式*/

/*轮播图样式*/

css语法结构

选择器 {属性:属性值}

css的三种引入方式

1. 通过link标签引入外部的css文件(最正规的用法)

   <link rel="stylesheet" href="02%20小米css样式.css">

2. 直接在html页面上head内通过style标签直接添加css代码

   <style>
   h1 {
       color: green;
   }
   </style>
   

3. 行内式 直接在标签内部通过style属性直接写 不推荐使用

   <h1 style="color: orange">我是Oscar</h1>

css查找

基本选择器

• 元素选择器 元素,指标签名,span p

  span {
  	color: red;
  }
  

• id选择器

  #id {
  	color: red;
  }
  

• 类选择器

  .c1 {
  	color: red;
  }
  

• 通用选择器 表示修改所有

  * {
  	color: red;
  }
  

组合选择器

<span>span</span>
<span>span</span>
<div>div
    <span>div里面的span</span>
    <p>div里面的p
        <span>div里面的p里面的span</span>
    </p>
    <span>div里面最下面的span</span>
</div>

• 后代选择器 span 后代里的所有div

  span div

• 儿子选择器

  div>span 仅div下一级的span

• 弟弟选择器

  div~span 同级div代码之下的span

• 毗邻选择器

  div+span 同级div代码之下紧挨着的span

属性选择器 []

使用标签的属性指来进行选择

任何标签都有自己默认的属性 id class

标签还支持自定义任何多的属性(就意味着可以让标签帮忙携带一些额外的数据)

方法

1.含有某个属性名的标签

2.含有某个属性名并且属性值是...的标签

3.找p标签并且含有某个属性名并且属性值是...的标签

1.
[password] {
	color: red;
}
2.
[username='jason'] {
	color: black;
}
3.
span[username='jason'] {
	color: red;
}

分组和嵌套

分组

当多个元素的样式相同的时候,可以通过使用在多个选择器之间使用逗号分割的返祖选择器进行统一设置元素样式.

/*将div和p标签都设置为红色*/
/*为了清晰通常多个标签分开行来写*/
div,
p {
	color: red;
}

嵌套

多种选择器混合起来使用

/*.c1类内部所有的p标签都设置为红色*/
.c1 p {
	color: red;
}

伪类装饰器 a:

/* 未访问的链接 */
a:link {
  color: red;
}

/* 鼠标移动到链接上 */
a:hover {
  color: blue;
} 

/* 选定的链接 */ 
a:active {
  color: orange;
}

/* 已访问的链接 */
a:visited {
  color: pink;
} 

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: red;
}

/*鼠标悬浮在span样式*/
span:hover {
	background-color: pink;
}

伪元素选择器 p:

清除浮动带来的负面影响

可以通过css添加文本内容

/*在一大段文字首字母变大*/
p:first-letter

/*在一大段文字之前加绿色*号*/
p:before {
    content: '*';
    color: green;
}
/*在一大段文字之前加蓝色?号*/
p:after {
    content: '?';
    color: blue;
}

选择器优先级

1. 选择器相同的情况下,引入方式不同

   谁在最下面,谁有效,上面的被覆盖

2. 选择器不同的情况下

   行内选择器 > id选择器 > 类选择器 > 元素选择器

css属性

长宽

div{
     200px;
    height: 400px;
}

只有块级标签才可以设置长宽

字体属性

文字字体

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字体大小

p {
  font-size: 14px;
}

字重(粗细)

p {
  font-weight: lighter;
}

bold粗体;bolder更粗;lighter更细;normal默认值,普通

100~900 设置具体粗细,400等于normal,700等于bold

文本颜色

p {
/*color :颜色*/
    color: 'red';
/*color :16进制颜色表示*/
    color: #06a0de;
/*color: rgb数字范围只能是0~255*!*/
    color: rgb(0,128,128); 
/*color: rgba a表示透明度,范围0到1,1为不透明,0为全透*/
    color: rgba(0,128,128,0.9);
}

文字属性

文字对齐

text-align

p {
    /*text-align: center;*/ 居中
    /*text-align: left;*/ 左
    /*text-align: right;*/右
    /*text-align: justify;*/两段对齐
}

文字装饰

p {
    /*text-decoration: underline;*/  下划线
    /*text-decoration: overline;*/上划线
    /*text-decoration: line-through;*/ 删除线
    text-decoration: none; 默认.定义标准的文本
}

/*去除链接下面的横线*/
a {
 text-decoration: none; 默认.定义标准的文本
}

首行缩进

将段落的第一行缩进48像素

p {
	text-indent: 48px;
}

背景属性

背景图片,默认是铺满整个区域

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

/*支持简写*/
background:#336699 url('1.png') no-repeat left top;

边框bordr

边框属性

• border-width 边框宽度
• border-style 边框形式
  • solid 实线
  • dashed矩形虚线
  • dotted 圆点虚线
• border-color 边框颜色

#i1 {
  border- 2px;
  border-style: solid;
  border-color: red;
}

/*简写形式*/
#i1 {
  border: 2px solid red;
}

圆角

border-radius

div {
    border: 10px solid black;
     400px;
    height: 400px;
    border-radius: 200px;
}

weight与height相同时画出为圆,不同时为椭圆

border-radius后可写百分数,指圆角半径像素值为长高的百分比

​ 写像素数,即为圆角半径像素值

display

用于控制HTML元素的显示效果。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

display:"none"与visiblulty:hidden的区别

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS盒子模型

标准盒

设置box-sizing-content-box时,采用标准模式解析计算,默认模式.

在标准盒模式下，一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)，高度亦然

Google浏览器body默认8px外边距

只能左右居中,不能上居中

,按照从上开始,顺时针方向

• margin 外边距

  可写1~4个参数

  1表示四周全部

  2表示上下和左右

  3表示上,左右,下

  4 表示上,右,下,左

• border 边框

• padding 内填充

• content 内容

怪异盒模型

在怪异盒模式下，一个块的总宽度 = width + margin(左右)（即width已经包含了padding和border的值），高度亦然

width = 内容区宽度 + padding + border

浮动float

在css中,任何元素都可以浮动.

浮动的元素,是脱离文档流的,(原来的位置会让出来)

注意:浏览器会优先展示文本内容

影响

父类标签塌陷

clear 清除浮动

用来消除父类标签塌陷

• 固定高度

  重写一个标签将边框撑起来
  /*.c5 {*/
  	/*height: 100px;*/
  /*}*/
  

• 伪元素清除法

  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }
  

• 写一个类,用继承的方式解决

哪个父标签塌陷了 就给谁加clearfix这个类属性值
.clearfix:after {
content: '';
clear: both;  /*左右两边都不能有浮动的元素*/
display: block;
}
可继承,也可自己定义style = "clear"
<div class="c3 clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
    <!--<div class="c5"></div>-->
    <!--<div style="clear: left"></div>-->
</div>

• 给父类元素设置display:inline-blick;
• 给父类元素设置:overflow:hidden;
• 对父元素使用伪元素 after,并清除浮动[clear:both]

overflow溢出

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

• overflow（水平和垂直均设置）
• overflow-x（设置水平方向）
• overflow-y（设置垂直方向）

定位(position)

所有的标签默认是静态static的,无法改变位置

static

static默认值,无定位,不能到左绝对定位的参照物,而且设置标签对象的left,top等值都是不作用的.

relative(相对定位)

相对于标签原来的位置移动,以自己原始位置为参照物.

.box {
    position: relative;
    top: 10px;
    left: 20px;
}

absolute(绝对定位)

相对于已经定位过(只要不是static都可以)的父标签的左上角.

.box {
    position: absolute;
    top: 10px;
    left: 20px
}

fix(固定)

以窗口为参考点进行定位,出现滚动条时,对象不会随滚动条滚动而滚动.始终固定在一个位置.

注意:若一个元素设置了position:absolute/fixed,则该元组就不能设置float

inherit

规定应该从父类元素继承position属性的值

是否脱离文档流

1. 不脱离文档流

   相对定位

2. 脱离文档流

   浮动的元素

   绝对定位

   固定定位

opacity

既可以调颜色,也可以调字体