css-01

骑猪看日落 2022-07-15 00:43 128阅读 0赞

1、html 属性所带来的问题  
   1）相同的效果，不同的标签会通过不同的属性来表示  
   2）使用属性 很不通用，一对一的修改，而不是整体修改  
2、使用 CSS  来解决上述问题  
   1）什么是CSS  
      CSS : Cascading Style Sheet ,层叠样式表,级联样式表,样式表  
   2）作用  
      1⃣️实现内容和表现分离  
      2⃣️提高代码的可重用性和可维护性  
   3）HTML属性 &  CSS样式  
      能有CSS的话，一定使用CSS来实现样式  
      如果CSS实现不出来效果，则选择使用html属性  
3、使用CSS样式表  
   1）使用CSS的方式  
      1⃣️内联方式(行内样式)  
         将css样式定义在某个单独的标签中  
<div style="color:red;"></div>  
      2⃣️内部样式表  
         将CSS样式定义在网页中的 <head></head> 中  
特点：针对当前网页网页有效  
      3⃣️外部样式表  
         将CSS样式定义在一个外部 .css 的文件中，哪个网页用，哪个网页进行引用  
特点：所有网页公用，真正意义的实现了重用性 和 可维护性  
   2）内联方式(行内样式)  
      将  样式内容  写在 html元素中的style属性中  
      CSS语法:  
       属性:属性值;  
  
       <div style="属性:属性值;属性:属性值;...."></div>  
       常用属性:  
           color : 修改当前标签中文本的颜色  
  background-color : 修改当前标签的背景颜色  
   3）内部样式表  
      【样式规则】 存放在 html文档头部 【head标签】中的 【style 标签】内  
      样式规则:  
          选择器\{  
样式声明  
属性:属性值;  
属性:属性值;  
属性:属性值;  
属性:属性值;  
 \}  
 选择器：  
     1、定义了一组样式的名称  
     2、哪些元素能够使用定义好的样式  
 p\{  
color:red;  
background-color:blue;  
 \}  
  
  
   4）外部样式表  
      将 样式规则 单独存放在 样式表文件中(\*\*.css),哪个页面想使用，哪个页面就引入当前的样式表文件  
      step 1 :  
           创建一个文本文件，将其后缀修改为 .css  
  在该文件中编写若干 样式规则  
      step 2 :  
           在想使用的页面上， 通过 <link /> 引入外部样式表  
  <link rel="stylesheet" type="text/css" href="样式表文件路径" />  
4、样式表特征  
   1）继承性  
      大多数的css样式规则可以被继承的。  
   2）层叠性  
      为同一个元素 定义多个 样式规则  
      多个样式规则同时存在时不冲突，多个样式规则会合并成一个，属性重复时以最后一个出现为准。  
   3）优先级  
      各级样式表冲突时(行内、内部、外部)，会按照不同的优先级来应用样式  
      0 : 浏览器缺省设置  
      1 : 内部样式表 或 外部样式表  
          冲突时：就近原则，谁在下，以谁为主  
      2 : 行内样式(内联样式)  
   4）!important 规则  
      通过 !important 显示调整样式规则的优先级  
      放在属性值之后，用 空格 来区分。  
      由!important 标识的属性值，优先级别最高  
      谨慎使用  
    
5、CSS基础选择器  
   1）元素选择器  
      别名:标签选择器、标记选择器  
  
  
      特点：通过元素名称作为选择器名称  
      作用：修改某一元素的默认样式  
      body\{\}  
      h1\{\}  
      h2\{\}  
   2）类选择器(类样式)  
      特点：通过元素的 class 属性来进行引用  
      作用：定义某一组标签的统一样式  
      语法：.className\{color:red;bakcground:yellow;\}  
           注意：className不能以数字开头  
  引用：<div class="className"></div>  
<h3 class="className"></h3>  
  
  
      注意：在一个class 中可以引用多个 类样式,多个类样式用 空格 隔开  
   3）分类选择器  
      由类选择器衍生出来的新选择器  
      将类选择器 与 元素选择器 结合使用  
      目的：为了更精准的定位的页面的元素  
      语法：元素选择器.类选择器\{\}  
             p.important\{\}  
   4）通用选择器  
      作用：适配页面上所用的元素，改变他们的样式  
      语法：\*\{\}  
   5）id选择器(id样式)  
      作用：通过页面元素的id值来进行选择器的引用,非常方便的定位到页面上的一个元素。精确定位。  
      语法：\#id\{\}  
      eg : \#top\{background-color:red;\}  
           <div id="top"></div>  
  id的作用：  
     1、定义元素在页面中的唯一标识  
     2、引用样式表中的id样式  
   6）群组选择器  
      选择器声明是以 , 隔开的 选择器列表  
      作用：定义一组元素的样式  
      h3,p,.new,\#test,div.newDiv,p.test\{\}  
   7）后代选择器  
      根据元素的嵌套关系来定义的样式  
      根据一个元素 去定位 它里面的其他元素  
      语法：  
          selector1 selector2\{\}  
 selector1 selector2 : 是之前学习过的任何一种选择器  
  
  
 <div>  
<div>  
<p>  
<span></span>  
</p>  
</div>  
<span></span>  
 </div>  
   8）子代选择器  
      要求选择器之间只能存在父子关系  
      语法:  
         selector1>selector2  
\#test>.news\{  
修改 id为test里面的 class为news的元素(下一级)  
\}  
  
  
      后代选择器 和 子代选择器 目的是为了精确匹配范围  
   9）伪类选择器  
      匹配元素 不同状态时候的选择器   
      语法：selector1:伪类选择器  
      伪类选择器分类：  
        1⃣️链接伪类  
  :link : 适用于尚未访问的链接(使用较少)  
  :visited : 适用于访问过的超链接(使用较少)  
2⃣️动态伪类  
  :hover : 适用于鼠标悬停在元素上面时候的状态  
  :active : 元素被激活的一瞬间的状态  
  :focus : 适用于元素获取焦点时的状态(input(text,password))  
3⃣️目标伪类  
4⃣️元素状态伪类  
5⃣️结构伪类  
6⃣️否定伪类  
6、颜色值:  
   1）颜色的英文表示法(没人用)  
   2）rgb(R,G,B)  
      R : red  0-255  
      G : green 0-255  
      B : blue 0-255  
      rgb(0,0,0) : 表示黑色  
      rgb(255,255,255) : 表示白色  
      rgb(125,16,72) :  
   3）rgb(x%,x%,x%)  
      rgb(30%,25%,78%)  
   4）\#rrggbb  
       r:0-9 A-F  
       g:0-9 A-F  
       b:0-9 A-F  
  
  
       \#000000 : 黑色  
       \#ffffff : 白色  
       \#ff0000 : 红色  
       \#e4393c : 京东红  
   5）\#rgb  
      \#rrggbb 的缩写  
  
  
      \#ff0000 --> \#f00;  
      \#77aaee --> \#7ae;  
      \#e4393c --> 无  
  
  
      \#000;  
      \#111  
      \#222  
      ...  
      \#eee  
      \#fff;  
7、属性 - 尺寸  
   设置元素的 宽度  高度  
   1）宽度   
      width :  
      max-width:  
      min-width: 与 max-width一同定义元素宽度的范围，与width冲突  
   2）高度  
      height :  
      max-height:  
      min-height:  
   注意：  
        只有 块级以及行内块 能够更改 width 和 height  
行内元素不能修改 width  和  height  
   3）溢出  
      属性：overflow  
      作用：当内容溢出元素框时，如何处理  
值: visible 显示(默认)  
   hidden 隐藏(常用)  
   scroll 有滚动条  
   auto 自动,溢出则显示滚动条，不溢出，没有滚动条  
      属性:overflow-x : 横向溢出时处理  
           overflow-y ： 纵向溢出时的处理方式  
8、边框  
   属性:  
简写方式:  
border:width style color;  
   width:边框线条的宽度  
   style:边框线条的样式,如实现(solid)、虚线(dotted)  
   color:边框线条的颜色  
   一次性 设置 上下左右 四个边框的 宽度 样式 颜色  
   border:1px solid \#f00;  
单边定义：  
   border-方向:width style color;  
     方向:top,bottom,left,right  
     border-top:2px solid \#000;  
border-width:四个边框的宽度  
border-style:四个边框的样式  
border-color:四个边框的颜色  
border-方向-属性:  
  方向：top,bottom,left,right  
  属性：color,width,style  
注意：边框颜色 除了可以设置正常颜色值之外，还可以设置为 transparent(透明)  
border-color:transparent;  
border:2px solid transparent;  
9、边框倒角(非重点)  
   元素 的四个方向的圆角设置  
   属性：border-radius  
   取值：  
1、给定4个值， 分别表示从左上角开始 按顺时针方向的四个角圆角半径  
2、给定1个值，表示四个角的圆角半径  
给定指定数值，2px , 10px  
   百分比,当前元素的宽度 的百分比 作为圆角半径  
   单独定义:  
     border-top-left-radius:  
     border-top-right-radius:  
     border-bottom-left-radius:  
     border-bottom-right-radius:  
10、边框阴影(非重点)  
    属性:box-shadow : 给指定元素边框增加阴影  
      box-shadow:h-shadow v-shadow blur spread color inset;  
         h-shadow:阴影水平位置  
v-shadow:垂直位置  
blur : 可选,模糊程度  
spread :可选,阴影尺寸  
color : 可选,颜色  
inset : 可选,将阴影改为 内阴影   
      常用写法:box-shadow:h-shadow v-shadow blur color;  
11、图片边框(非重点)  
    让图片作为元素的边框出现  
    属性:border-image:source width repeat  
12、轮廓(非重点)  
    元素的周围绘制一条线，位于边框之外  
    outline:width style color;  
    outline:10px solid red;