WEB--CSS基础

文章目录

    • 1. CSS介绍
    • 2. CSS使用
      • 基本语法
      • 页面引入
    • 3. CSS选择器
    • 4. CSS属性设置
      • 颜色属性
      • 文本属性
      • 边框属性
      • 背景属性
      • 元素溢出
    • 5. 盒子模型
      • 内补白(内补丁)
      • 外补白(外补丁)
      • 盒子模型
    • 6. reset.css

1. CSS介绍

  • CSS: Cascading Style Sheets,意思是层叠样式表。
  • html负责文档的结构和内容,CSS负责表现形式

2. CSS使用

基本语法

# 选择器 { 属性:值; 属性:值; 属性:值;}
div{width:100px; height:100px; color:red}

页面引入

  • 外联式:通过link标签,链接到外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
  • 嵌入式:通过style标签,在网页上创建嵌入的样式表。
<style type="text/css">

    div{ width:100px; height:100px; color:red }
    ......

style>
  • 内联式:通过标签的style属性,在标签上直接写样式。
<div style="width:100px; height:100px; color:red ">
......
div>

3. CSS选择器

  • 标签选择器

标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。

*{margin:0;padding:0}
div{color:red}   

<div>....div>   
<div class="box">....div>   
  • id选择器
  • 通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,
  • id名一般给程序使用,所以不推荐使用id作为选择器。
#box{color:red} 

<div id="box">....div>   
  • 类选择器
  • 通过类名来选择元素,一个类可应用于多个元素,
  • 一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....div>
<h1 class="red big mt10">....h1>
<p class="red mt10">....p>
  • 层级选择器
  • 主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,
  • 同时也可以通过层级,防止命名冲突。
.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....span>
    <a href="#" class="red">....a>
div>

<h3 class="red">....h3>
  • 组选择器
  • 多个选择器,如果有同样的样式设置,可以使用组选择器。也成为 并列选择
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....div>
<div class="box2">....div>
<div class="box3">....div>
  • 伪类及伪元素选择器
  • 常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,
  • 伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
.box1:hover{color:red}

<div class="box1">....div>

a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在该元素上时 */


a:before{content:"Hello";}         /*在每个<a>元素之前插入内容*/
a:after{content:"world";}        /*在每个<a>元素之后插入内容*/

4. CSS属性设置

颜色属性

  • 颜色名表示,比如:red 红色,gold 金色
  • 16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00
  • RGB颜色: 红®、绿(G)、蓝(B)三个颜色通道的变化 background-color: rgb(200,100,0);
  • RGBA颜色: 红®、绿(G)、蓝(B)、透明度(A) background-color: rgba(0,0,0,0.5);

文本属性

常用的应用文本的css样式:

color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:‘微软雅黑’;
font-style 设置字体是否倾斜,如:font-style:‘normal’; 设置不倾斜,font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高,如:line-height:24px;
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中

边框属性

border:宽度 样式 颜色;
border-color;
border-style; 边框样式:solid实现,dotted点状线,dashed虚线
border-width:
border-left-color;
border-left-style;
border-left-width:
CSS3样式-- border-radius:圆角处理
CSS3样式-- box-shadow: x轴偏移 y轴偏移 模糊度 扩散成都 颜色 inset内阴影 设置或检索对象阴影

背景属性

background-color: 背景颜色
background-image: 背景图片
background-repeat:是否重复,如何重复?(平铺)
background-position:定位
background-size: 背景大小,如 background-size:100px 140px;

元素溢出

当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。

  • overflow的设置项:
  • visible 默认值。内容不会被修剪,会呈现在元素框之外。
  • hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。
  • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

5. 盒子模型

内补白(内补丁)

padding: 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top: 检索或设置对象顶边的内部边距
padding-right: 检索或设置对象右边的内部边距
padding-bottom:检索或设置对象下边的内部边距
padding-left: 检索或设置对象左边的内部边距

外补白(外补丁)

margin: 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
margin-top: 检索或设置对象顶边的外延边距
margin-right: 检索或设置对象右边的外延边距
margin-bottom: 检索或设置对象下边的外延边距
margin-left: 检索或设置对象左边的外延边距
  • margin相关技巧

1、设置元素水平居中: margin:x auto;
2、margin负值让元素位移及边框合并

盒子模型

元素在页面中显示成一个方块,
类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,
帮助我们设置元素对应的样式。

把元素叫做盒子,设置对应的样式分别为:
盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

盒子真实尺寸
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

在布局中,如果我想增大内容和边框的距离,又不想改变盒子显示的尺寸

box-sizing:content-box | border-box

6. reset.css

https://blog.csdn.net/brain_bo/article/details/81560444

你可能感兴趣的:(Web,html,css)