零基础学前端开发--css（4）_html-js-css

1、什么是html" class="superseo">css？css的作用是什么？

CSS 指层叠样式表，css的作用是对网页的内容进行美化，调整大小，位置颜色等等样式。

2、css的使用方法？

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
例如：color:red;width:40px;
两个属性之间用“;”连接。
选择器{样式声明;样式声明…}

小提示：css中的注释的写法
/*这是个注释*/
例子如下

 p{
     /* 注释 */
     width:10px;
   }

2.1、行内样式，内联样式

在元素中，写style属性，在style属性中编写样式

（1）写法：<元素 style=“样式声明;样式声明…”>，例如：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一个的网页title>
  head>
  <body>
    
    <div style="color:rgb(209, 206, 26);font-size: 50px;">李易峰最帅div>
  body>
html>

（2）效果：

（3）总结
a、内联样式只对当前元素生效，没有可重用性
b、内联样式默认优先级最高
c、内联样式只在学习和测试中使用，项目基本不用

2.2、内部样式

在head标签中，写style标签，在style标签内部，编写属性

(1) 写法：
选择器{样式声明;样式声明…}
选择器：定义页面中使用这个样式的元素条件，例如：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一个的网页title>
  head>
  <style>
    div {
      color: rgb(209, 206, 26);
      font-size: 50px;
      width: 500px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      border:1px solid rgb(209, 206, 26);

    }
  style>
  <body>
    <div>李易峰最帅div>
  body>
html>

（2）效果

2.3、外部样式

创建一个.css文件，在html中的head标签里，使用link引入

必须有rel=“stylesheet”，代表当前文件和引入文件的关系
.css与在style标签内的写法一样

（1）在html中引入写法如下

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="my.css"/>
    <title>我的第一个的网页title>
  head>
  <style>
    
  style>
  <body>
    <div>李易峰最帅div>
  body>
html>

（2） css文件里的写法

div {
    color: rgb(209, 206, 26);
    font-size: 50px;
    width: 500px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    border:1px solid rgb(209, 206, 26);
    background-color: black;
  }

（3）项目结构如下：

（4）效果

3、css的选择器？ 3.1、通用选择器

声明的样式匹配所有的元素

*{margin:0；padding:0}

开发时，会选择在公用的css中写入该样式，去掉浏览器的外边距和内边距。

3.2、元素选择器

利用标签关键字声明

div{
color:red;
}
p{
font-size:14px;
}

3.3、ID选择器

写法：
#id值{ 样式声明 }

例子：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="my.css"/>
    <title>我的第一个的网页title>
  head>
  <style>
    #item{
      color:red;
    }
  style>
  <body>
    <div id="item">李易峰最帅div>
  body>
html>

注意：标签上声明的id的值只能被一个元素用

3.4、类选择器

（1）基础用法

写法：
.类名{声明样式}

例子：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="my.css"/>
    <title>我的第一个的网页title>
  head>
  <style>
    .item{
      color:red;
    }
  style>
  <body>
    <div class="item">李易峰最帅div>
    <p class="item">不接受反驳p>
  body>
html>

类选择器在可以多个标签使用一个，例子中，div和p标签都使用了item这个类，同时拥有字体颜色为红色这个样式。

（2）多类选择器

一个标签重病可以用多个类选择器。写法：
<元素 >

（3）分类选择器

元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
例如：
.item.name{}

（4）类名定义规范

类名在写样式时必须以.开头
不能数字开头
可以包含_或者-
定义时尽量可以做到见名知意

3.5、群组选择器

写法：
选择器1,选择器2,选择器3.....{样式声明} #item1,.item2,div,span.item3{color:red;}

3.6、后代选择器

通过元素后代关系，来匹配元素
后代关系：一层嵌套或者多于一层嵌套称为后代
写法：
选择器1 选择器2 选择器3{样式声明}

3.7、子类选择器

通过元素子代关系，来匹配元素
子代关系，一层嵌套为为子代
写法：
选择器1>选择器2>选择器3{样式声明}
子代选择器和后代选中器中可以混合使用
#item>p span{ color:red; }

3.8、伪类选择器

匹配元素在某一个状态时的样式
所有元素都能用的伪类
:hover 鼠标悬停的状态

3.9、选择器权值

选择器权值，代表选择器的重要程度，重要程度高，优先显示

!import >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器 0

3.10、选择器权值特点

（1）当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加值最大的显示
（2）添加了!important当前css样式直接获取最高优先级
（3）有多个选择器的权值一样大，按照就近原则

4、css的特性？ 4.1、继承性

（1）文本样式和字体样式可以继承父级或者父级的父级的样式（例如：颜色，字体大小，宽高等样式）
（2）注意：a标签不会继承字体颜色

4.2、堆叠性

为一个标签定义多个样式规则，如果样式属性不冲突，都会作用到这个标签上

4.3、优先级

（1）默认优先级：内联样式 > （内部样式，外部样式，就近原则） > 浏览器默认样式
注意：在f12控制台中，样式是按照默认优先级顺序从上往下显示
（2）调整优先级：设置最高优先级 !important，比内联都高，写在某一个值与分号之间，!important与值之间有空格color: red !important ;只能用在内部样式中。

5、尺寸和边框 5.1、尺寸

（1）width：宽（2）height：高
注意：
① px和rem为单位；
② %也可以作为单位，为父元素的宽或者高的百分之多少，但是如果设置高度，当前元素的父元素是body时，%失效；
（3）min-width：宽度的最小值（4）max-width：宽度的最大值（4）min-height：高度的最小值（5）max-height：高度的最大值

5.2、元素尺寸设置总结

具备width和height属性的元素，都可以设置width和height

块级元素	行内元素
可以设置宽高	设置宽高无效（ps：若想设置宽高，可以用css（display:inline-block）将元素设置为行内块元素）
默认宽为：父元素的100%，默认高靠内容撑开	宽高靠内容撑开

5.3、元素溢出处理

当元素的长度或者高度超出元素的宽或者高时，css的处理，使用css的overflow

（1）overflow:visible; 默认值。内容不会被修剪，会呈现在元素框之外 
（2）overflow:hidden;溢出部分隐藏 
（3）overflow:scroll; 内容会被修剪,带滚动条，不管是否溢出，都添加x/y轴的滚动条 ,浏览器会显示滚动条以便查看其余的内容
（4）overflow:auto; 自动， 不溢出就没有滚动条，溢出自动在溢出方向添加滚动条 
（5）overflow-x:scroll; 单独让x轴出现滚动条 
（6）overflow-y:scroll; 单独让y轴出现滚动条
（7）overflow:visible; 规定应该从父元素继承 overflow 属性的值。

5.4、边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

（1）基础用法
border：width style color
border：宽度样式颜色；
例如：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="my.css" />
    <title>我的第一个的网页title>
  head>
  <style>
    div{
      margin-bottom: 20px;
      padding: 20px;
      width:400px ;
    }
    .border1 {
      border:1px solid rgb(189, 119, 27);
    }
    .border2 {
      border-bottom:1px solid rgb(189, 119, 27);
    }
    .border3 {
      border:1px solid rgb(189, 119, 27);
      border-radius: 8px;
    }
    .border4 {
      border-left:3px solid rgb(189, 119, 27);
    }
  style>
  <body>
    <div class="border1">在四边都有边框 div>
    <div class="border2">底部边框 div>
    <div class="border3">圆角边框  div>
    <div class="border4">左侧边框带宽度div>
  body>
html>

（2）边框样式：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="my.css" />
    <title>我的第一个的网页title>
  head>
  <style>
    div{
      margin-bottom: 20px;
      padding: 20px;
      width:400px ;
    }
    .border1 {
      border:none;
    }
    .border2 {
      border:3px dotted rgb(189, 119, 27);
    }
    .border3 {
      border:3px dotted rgb(189, 119, 27);
    }
    .border4 {
      border:3px double rgb(189, 119, 27);
    }
    .border5 {
      border:3px groove rgb(189, 119, 27);
    }
    .border6 {
      border:3px ridge rgb(189, 119, 27);
    }
    .border7 {
      border:3px inset rgb(189, 119, 27);
    }
    .border8 {
      border:3px outset rgb(189, 119, 27);
    }
  style>
  <body>
    <div class="border1">none: 默认无边框 div>
    <div class="border2">dotted: 定义一个点线边框 div>
    <div class="border3">solid: 定义实线边框  div>
    <div class="border4">double: 定义两个边框。 两个边框的宽度和 border-width 的值相同div>
    <div class="border5">groove: 定义3D沟槽边框。效果取决于边框的颜色值div>
    <div class="border6">ridge: 定义3D脊边框。效果取决于边框的颜色值div>
    <div class="border7">inset:定义一个3D的嵌入边框。效果取决于边框的颜色值div>
    <div class="border8">outset: 定义一个3D突出边框。 效果取决于边框的颜色值div>
  body>
html>

5.5、阴影

（1）例子：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="my.css" />
    <title>我的第一个的网页title>
  head>
  <style>
    div {
      margin-bottom: 20px;
      padding: 20px;
      width: 400px;
      background-color: rgb(68, 68, 53);
      box-shadow: 10px 10px 5px #d1ae10;
    }
  style>
  <body>
    <div>div>
  body>
html>

（2）写法：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

5.6、盒子模型

所有HTML元素可以看作盒子，
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)

（1）各部分说明
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
（2）最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
（3）元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

希望读到这篇文章会对你有帮助~，有帮助请留下一个赞和关注(╹▽╹)
——————来自李易峰的小粉丝，凡凡同学

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1322836.html

零基础学前端开发--css（4）

发表评论

评论列表（0条）