自学前段-css第二天

文艺渣渣
112 阅读5分钟

css基础

css的引入方式

  • 内嵌式： (css写在html文件style标签中<style标签通常约定写在head标签中)
  • 外联式： (css写在一个单独的.css文件中<通过link标签在html文件中引入>)
  • 行内式： (css写在标签的style属性中<配合js使用>)

基础选择器

  • 标签选择器

    标签名{css属性名:属性值;}（通过标签名找到页面中这类标签，设置样式<标签选择器选择的是一类标签而不是某一个>）

  • 类选择器

    .类名{css属性名:属性值;}(类名不可以以数字或中划线开头;一个标签可以有多个类名，用空格隔开就行了)

  • id选择器

    #id名{css属性名:属性值;}(所有标签都有id属性;一个标签只能有一个id选择器并且在一个页面中是唯一的，不可重复;)

  • 通配符选择器

    *{css属性名:属性值;}(使用于所有属性设置的共同属性)

字体和文本样式

  • 字体样式 1.字体大小：font-size：数字px;

2.字体粗细：font-weight：nomal正常;bold加粗;或纯数字;

3.字体样式：font-style：nomal正常;italic倾斜;

4.字体类型：font-family：微软雅黑;宋体等;

5.font属性可以连写：font{12px 8 nomal 微软雅黑}<字号和行高是用／隔开的> brackground属性连写：brackground{color image repeat postion}

  • 文本样式
  1. 文本缩进：text-indent{2em;或px}(一个em代表一个文字大小)
  2. 文本水平对齐方式：text-align{center;left;right}
  3. 文本修饰：text-decoration{underline(下划线);line-through(删除线);overline(上划线);none(无修饰线)} <在开发中使用text-decoration:none;来清除a标签的下划线>
  • 行高：line-height:数字px;或数字(倍数);
  • 颜色的取值：关键词(red);grb(0,0,0);rgba(0,0,0,0);十六进制表示法：#ffffff;

盒子标签居中margin:0 auto;

  • 如果让div,p,h(等大盒子标签)水平居中：直接给当前元素本身设置margin:0 auto;来实现。
  • margin:0 auto;一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。

选择器进阶

  1. 复合选择器
  • 后代选择器<子代孙代有相同的都可以选中>(空格隔开)： 语法：选择器1 选择器2{css属性名:属性值;}
  • 子代选择器<只有子代会选中>(>隔开)： 语法：父代选择器>子代选择器{css属性名:属性值;}
  1. 并集选择器
  • 设置相同的属性的时候可以选择多组标签用，隔开
  • 语法：选择器1,选择器2,选择器3{css属性名:属性值;}
  1. 交集选择器
  • 选中页面中同时满足多个选择器的标签
  • 语法：选择器1选择器2{css属性名:属性值;}
  • 交集选择器中如果有标签选择器，标签选择器必须放在最前面
  1. 伪类选择器
  • 即鼠标悬停在标签上的状态，设置样式
  • 语法：选择器:hover{css属性名:属性值;}
  1. Emmet语法
  • 通过简写代码，快速生成代码

背景相关属性

  • 设置背景颜色background-color
  • 设置背景图片background-image
  • 背景图的平铺属性background-repeat: repeat(默认值水平和垂直方向都平铺);
    no-repeat(不平铺);
    repeat-x(设置水平方向平铺);
    repeat-y(设置垂直方向平铺);
  • 背景位置background-position:left;center;right(或数字px) top;center;bottom(或数字px);

元素的显示模式

1. 块级元素

  • 显示特点
  1. 独占一行
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高
  • 代表标签
  1. div,p,h,ui,li,di dt,dd,form,header,nav,footer...

2. 行内元素

  • 显示特点
  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高
  • 代表标签
  1. a,span,b,u,i,s,strong,ins,em,del...

3. 行内块元素

  • 显示特点
  1. 一行可以显示多个
  2. 可以设置宽高
  • 代表标签：
  1. input,textarea,button,select...
  2. 特殊情况：img有行内块元素的特点，但是chrome调试中显示是inline

4. 显示模式转换

display：block(转换成块级元素);
display：inline-block(转换成行内块元素);
display：inline(转换成行内元素);

5. html嵌套规范注意点

  • 块级元素一般作为大容器，可以嵌套：文本，块级元素，行内元素，行内块元素。。。 但是：p标签中不要嵌套div，p，h等块级元素
  • a标签可以嵌套任意元素 但是a标签不能嵌套a标签

css特性

1继承性

  • 特性子元素有默认继承父元素的特点（文字控制好属性都可以继承）
  • 可以通过调试工具判断样式是否可以继承 如果自身带有属性，父级元素设置的属性不会继承

2. 层叠性

  • 给同一个标签设置不同样式，样式会层层叠加，共同作用在标签上
  • 给同一个标签设置相同的样式，样式会层层覆盖，写在最后的杨时候会生效
  • 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3. 优先级

一个标签可以有多个选择器，每个是优先级不一样的：

  • !important>行内样式>id选择器>类选择器>标签选择器>继承
  • !important可以添加在id选择器，类选择器，标签选择器的属性值后面添加!important的优先级变为最高。(如果标签本身有属性，继承的优先级最低，添加!important也不能改变优先级) 权重计算法(优先级计算法)
  • 在使用符合选择器的时候判断优先级的方法：计算公式-> (0*<行内样式的个数>,0<id选择器的个数>,0<类选择器的格式>,0<标签选择器的个数>*)
  1. 先比较第一级选择器个数，如果比较出大小，就不用往后比了。
  2. 如果上一级选择器个数相同，依次往后比 。
  3. 如果所有数字都相同，说明优先级一样，按照层叠性生效。
avatar
文章
阅读
粉丝