css基础篇

css-- cascading style sheets(层叠样式表) 特点：很好的实现了结构与表现相分离

css语法：

css是由选择符和声明两大部分组成，声明又是由属性和属性值组成即： 选择器 {属性：属性值}

eg: h1{
  color:red;
  font-size:12px;
   }

一.样式的创建：

1. 内连样式（行内样式） 语法：

<h1 style="color:red "></h1>

2. 内部样式表 语法：

<style type=text/css>
h1{
color:red;
}
</style>
注：建议style放在head部分

3. 外部样式表 首先创建一个后缀名为.css的外部文件，然后在html页面的head部分通过link引入 语法：

<link rel="stylesheet" hred=css/public.css>
注： rel 用来设置引入文件和当前文件之间的关系

二. 样式的优先级

当多种样式表出现在一个html页面中时，我们来取就近原则，即离被设置的元素越近优先级越高 当在css样式中出现 ！important关键词时，不再遵循就近原则，优先级是最高的

三. css选择器

1. id选择器

语法：

<h1 id="city">hello</h1>
样式中。#city{
         color:red
            }
注意： a>id名命名要语义化，不能是汉字，纯数字或者以数字开头；b>常用命名方法：驼峰命名法（favcCity）
                    下划线或中划线连接命名（fav-city）
      c> id名是唯一的不能出现同名              

2. 类选择器 class选择器

语法：

<h1 class="fav-city">world</h1>
样式： .fav-city{
            color:red;
                }

备注

• class名命名也要语义化 驼峰 favCity或者下划线中划线连接命名；
• 我们可以给具体有相同样式的元素添加相同的class名；
• 当一些元素即具有一些相同的样式，又有某些样式不相同此时就需要用到类名词列表的用法；

3. 标签选择器 (元素选择符)

语法： 标记名称{属性：属性值}

img{border:5px solid red;}

4.后代选择器

语法 父选择器。子选择器 eg

ul-one li {border:2px solid red;}

5.派生选择器

<li><strage> 只有在li为斜体其他为正常

6.属性选择器

img <alt>{color:red} a <href><title>{color:red} 同时有a.href.title属性的标为color：red

7.群组选择器

语法 h1,h2,h3,h4,h5,h6,strong,b{font-weight:nomal;}

8.通配符

*{margin:0;padding:0;}注*匹配所有的html元素

9.伪类选择器

语法：选择符： hover{属性：属性值}

• a:link 超链接的初始状态（连接没有访问过）
• a:visited 连接访问过后的状态
• a:hover. 鼠标滑过时的状态（悬停时的状态）
• a:active 鼠标按下时（连接被激活时的状态） 备注：实际应用中我们简写a的4种状态 eg：a:{color:black;} a:hover{color:blue;}

四.css选择器权重

当有两个选择器匹配到同一元素时，设置相同的样式产生冲突，我们以权重较高的为准； 四个等级

• 1.内联<h1 style="color:red"></h1> 权重1000；
• id选择器。 权重100或0100；
• class选择器，伪类选择器 权重10或0010；
• 标签选择器，伪元素。权重1或0001； 注； 后代选择器权重：所有选择权重之和； 群组选择器权重：每个选择器权重； 当权重相同时，后写的会覆盖先写的； 扩展： 集成的css属性的权重为0，只要给子元素单独设置后都能覆盖；

五. css核心属性

一. 字体类属性

1. 字体类型

语法：font-family字体1，字体2，字体3

eg：body {font-familt:"microsofy yahei"}

注：设置多个字体时用逗号分隔

2. 字体大小

font-size: 数值+单位

注：

• 浏览器默认字体大小为16px；
• 常用字体大小单位为px；
• 字体大小一般设置偶数不设置奇数；

3. 字体加粗

语法：

font-weight:normal/bold/bolder/100-900

normal 默认值，常规字体不加粗； bold或bolder，加粗字体； 100-500 常规字体不加粗 600-900 加粗字体

eg： h1,h2,h3,h4,h5,h6{font-weight:normal}

4. 字体倾斜

font-style:normal/italic/obllique

normal. 默认值，常规字体不倾斜

italic或oblique 倾斜

eg：em,i{font-style:normal}

扩展 font-variant:small-caps;小型大写字母字体

5. font复合写法：

语法： font：bolder 12px/1.5 "黑体"

注：

• 在font复合写法中，多个属性之间用空格隔开；
• 字体大小和字体类型不能互换位置，字体类型必须放在简写方式末尾；

6. 字体颜色

语法： color：属性值 注： 颜色属性值导致写法有三中

• 十六进制写法 color:#000;黑色 color:#fff;白色
• rgb写法 color:rgb(0,0,0);黑色 color rgb(255,255,255); 白色
• 颜色值单词 color：black;黑色 color:white；白色

二.文本类属性

1.水平对齐方式

语法： text-align:left(左对齐)｜center (居中)｜right(右对齐)｜justify(两端对齐)

2.文本修饰

语法： text-decoration: none | underline | overline | line-through

1 默认去掉文本修饰 | 下划线 | 上划线 | 删除线

3.首行缩进

语法： text-indent： 数值+单位

注意： 正值向后缩进，负值向前缩进设置最大负值类似隐藏；

4.文本大小写转换

语法： text- transform： none | capitalize(首字母大写)|uppercase(全部大写)| overcase(全部小写)

5.行高

语法： line-height: normal |数值 | 数值+单位;

eg1: line-height:32px;

eg2: line-height:3; 行高为字体大小的3倍

注：设置行高 = 容器高，可以实现单行文本在定高容器中垂直居中 line-height 不允许设置负值

6.字符间距 字与字 字母与字母之间的间距

语法： letter-spacing：数值+单位； 允许设置负值

7.词间距 字母与字母之间的距离

语法： word-spacing： 数值+单位； （允许设置负值主要针对英文）

8.长单词换行 字母换行

语法：word-wrap： break-word

三. 列表属性

1.设置列表符号类型

语法： list-style-type: diss(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号)；

2.使用图片作为列表符号

语法：list-style-image:url(1.jpg)

3.设置列表符号的位置

语法： list-style-position: outside(外)|inside(可以互换位置)

四. 背景属性

1.背景色

语法：background-color:颜色值

2.背景图

语法： background-image: url(1.jpg);

注：网页中有两种图片形式： 插入图片；背景图

• 插入图片 是在<div></div> 插在<img src="图片路径"> 需要频繁更换的数据型图片使用img插入；
• 背景图 显示在底层用来装饰网页某个板块的图片，使用背景图呈现；

注：背景图的三种默认显示原则；

 当背景图尺寸等于容器尺寸时，背景图恰好显示在容器中；
 当背景图尺寸小于容器尺寸时，默认平铺直至铺满整个容器；
 当背景图尺寸大于容器尺寸时，只能显示容器范围以内的容器；

3.背景平铺

语法：background-repeat: repeat(平铺)| no-repeat(不平铺)|reapeat-x(横向平铺)|repeat-y(纵向平铺)

4.背景位置

语法：background-positin:left|center|right|数值 --水平方向的； top |center|bottom|数值-- 垂直方向；

注：当设置为数值时 向右为正 向右为负 向下为正 向上为负

5.背景简写方式

语法：background:orange url(1.jpg) no-repeat right bottom

注：多个属性值可以互相转换位置，建议按照这个顺序写；

6. 背景图不随文字动固定

语法： background-attachment: fixed

注：背景图固定不跟随内容移动

扩展网页中常见的三种图片格式

• jpg: 有损压缩格式：靠损失图片本身的质量来减少图片体积，适用于颜色丰富的图像，不支持透明；
• gif：有损失压缩格式，靠损失图片的色彩数量来减少图片体积，支持动画，支持透明，透明有毛边
• png： 有损失压缩格式，损失图片的色彩数量来减少图片的体积支持透明，不支持动画是fireworks的源文件格式，适用于颜色数量较少的图像，透明没有毛边

五. 浮动

语法：float： none| left| right 默认值|左浮动|右浮动

注：

• 当需要让自上而下排列的元素到一行显示时，给这些元素添加浮动；
• 设置了浮动的元素会脱离文档流，会和后面的元素互相覆盖，但是不会和图片，文字发生覆盖；

清除浮动

clear:none | left | right |both 默认值 |清除左浮动|清除右浮动|两边清除

注意：当有元素浮动影响到后面元素的正常显示，那么给受影响的元素添加清除浮动；

六.盒模型

css盒模型是css的基石，规定了html元素如何显示及互相之间的位置关系。

css盒模型是由content(主体部分)，padding(补白，内容填充)border(边框)margin外边距四部分组成

1. content:是由width和height组成的一个矩形区域

语法： width：数值+单位； height: 数值+单位

注：width和height设置除0以外的其他值，必须添加单位；

2.padding

• 完整写法：padding-left:20px.

• 简写方式：

  a。 padding:20px 四个方向都为20px；

  b。padding：20px 30px； 上下为20px，左右为30px;

  c。padding：20px 0 30px 上20px,左右为0px，下为30px；

  d。padding: 40px 30px 20px 10px 顺时针方向依次为上下左右

注：

• 当需要调整子元素在父元素中的位置关系时，通过给父元素设置padding来实现；
• 如果元素本身设置的宽高包含padding值在内，单独设置padding值后，要在原来宽高的基础上减去设置的padding值，保证总宽高不变。
• padding不允许设置负值。
• 背景可以延伸到padding区域。

3. border

• 单独设置某个方向的边框

  1》 边框线 border-right-style: solid(实线) |dashed(虚线) |dotted(点线)|double(双线)；

  2》边框宽度 border-right-width: 数值+单位；

  3》颜色 border-right-color: red;

  border简写 border-right：10px solid blue

  如果四个方向都需要边框，并且样式相同，语法如下： border:10px double red

  去掉某个方向的边框 border-right：none

4. margin

语法：margin：属性值

注：

• margin属性值的设置方法同padding；

  背景不能延伸到margin区域。

• 设置左右margin为auto可以让有宽度的div盒子水平居中；

• margin可以设置负值；

  七.容器溢出

  语法： overflow:visible / hidden /scroll /auto

  visible 默认值，溢出内容显示在容器框外；

  hidden 溢出内容隐藏不可见；

  scroll 以滚动条的形式查看，溢出内容，没有溢出时显示默认滚动条；

  auto 自动检测是否溢出，溢出时添加滚动条；

  注：还可以单独设置某个方向的溢出

  overflow-x: hidden /scroll /auto;

  overflow-y: hidden/scroll/auto;

  ###文本溢出

  1.强制在一行显示

  语法： white-space:normal/nowrap/pre/pre-line/pre-wrap

  normal: 默认值；

  nowrap:强制在一行显示，不识别空格，不识别换行；

  pre ： 强制在一行显示，识别空格；

  pre-line: 不识别空格，不识别换行；

  pre-wrap: 识别空格，识别换行；

  2.文本溢出

  语法：text-overflow: clip/ellipsis

  clip 默认值，简单的载物，不显示省略号；

  ellipsis 显示省略号；

  ⭐️ 单号文本省略号的设置如下：

  width:value,设置一个宽度，

  white-space:nowrap:,强制在一行显示，

  overflow:hidden,溢出隐藏，

  text-overflow:ellipsis; 显示省略号；

  八. 元素分类 html

  html元素根据自身特征分为块元素，内联元素，内联块元素；

1.块元素

常见块元素： div,p,ul,ol,li,dl,dt,dd,h1,...h6,form,hr,fieldset;

特点：

• 块元素默认独占一行，自上而下排列，默认宽度为100%，高为0；
• 块元素可以定义宽高及任意margin,padding和border;
• 块元素可以作为一个容器容纳其他的块元素和内联元素；

注：p标签中只能嵌套内联不能嵌套块元素；

2. 内联元素（行内元素） 常见内联元素： a,span,strong,b,em,i,br,label,u

特点：

• 始终在一行逐个进行显示，横着排列；
• 内联元素不能设置宽高，宽高是由内容撑开的，也显示一个矩形区域；
• 内联元素可以设置左右相关的(margin-left,margin-right,padding-left,paddig-right),不能设置上下相关的(margin-top,margin-bottom,padding-top,padding-bottom)
• 内联元素可以嵌套内联元素，不建议嵌套块元素；

a里不能嵌套a，因为链接地址原因；

3. 内联块元素

常见内联块元素： img,input,select,textarea

特点：既具有内联的特征，在一行逐个进行显示，又具有块元素的特征，可以设置宽高及任意margin,padding,border

注：默认有margin或padding或border的元素有哪些

默认有margin的元素：body,h1..h6,ul,p,ol,od,dd,hr; 默认有padding的元素：ul,ol,td,input,textarea,fieldset 默认有border的元素：hr,input,select,textarea,fieldset

九.元素类型转换

语法：display:block /inline /inline-block / list-item /none;

1.display:block

将元素转换为块元素，是大部分块元素的默认display属性值；

2.display: inline

将元素转换为内联元素，是a,span 等这类元素的默认display属性；

3.display:inline-block

将元素转换为内联块元素，是img,input等这类元素的默认display属性值；

4.display:list-item

将元素转换为li类型，是li的默认display的属性值；

5.display:none

将元素隐藏不显示

注；如果需要元素再次显示，设置除none以外的其他值即可

注:display:none /overflow:hidden;的区别

前者无论是否溢出将整个元素隐藏不显示，后者只能隐藏溢出部分；

注：当给内联元素设置浮动后，就可以设置宽高及任意margin，padding值了

###垂直对齐方式

语法：vertical-align:baseline/top/middle/bottom

beseline. 默认值

top： 顶部对齐

middle： 中部对齐

bottm 底部对齐

注：

• 用于设置表格单元格内容垂直对齐方式
• 用于设置内联或者内联块所在行基线垂直对齐

扩展： 去掉input框的外边框。input{outline:none}

十.定位

语法： position: static/absolute/relative/fixed

static 默认值，无特殊定位遵循html元素默认显示原则

absolute 绝对定位

relative 相对定位

fixed 固定定位

1.绝对定位

语法： position：absolute;

参照物：离它最近的具有定位属性的父包含块，如果逐级寻找，找不到满足条件的父包含块，那么相对对于浏览器窗口进行定位

注： 我们通过left,right,top,bottom四个属性来确定元素具体定位的位置；

2.相对定位

语法：position:relative

参照物：元素偏移前自身的位置

注： 我们通过left,right,top,bottom来确定元素偏移的位置

3.固定定位

语法：position fixed

参照物 整个屏幕窗口

4.扩展：粘性定位

语法：position: sticky(relative和fixed的结合体)

相对，绝对定位，固定定位的区别：

1.参照物不同

相对定位的参照是元素偏移前自身的位置；绝对定位的参照物是离它最近的具有定位属性的父包含块，固定定位的参照物是整个屏幕窗口

2.是否脱离文档流

相对定位不会脱离文档流，原位置保留，绝对定位和固定定位会脱离文档流，原位置不保留

接下来进入css一些实际场景=》