css由基础到高级

其他 2018-10-31 00:31:18 阅读次数: 0

CSS

CSS基本用法

1.css的定义

选择器{属性：值；属性：值；属性：值；属性：值；}

  • 选择器是将样式和页面元素关联起来的名称

  • 属性是希望设置的样式属性，每一个属性有一个或多个值

/* 样式中注释的写法，单行或者多行注释 */
div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}

2.css盒子模型

在这里插入图片描述
将元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子的内边距(padding)、盒子的外边距(margin)

设置宽高

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

设置内边距

padding后面还可以跟3个值，2个值和一个值，分别设置如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

盒子的真实尺寸

盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

  • 盒子宽度=width+padding左右+border左右
  • 盒子高度=height+padding上下+border上下

块元素居中技巧

使用margin值中的“auto”关键字，“auto”只适用于左右居中，不可用于上下

扫描二维码关注公众号，回复： 3795001 查看本文章 
.box{
     width:300px;
     height:300px;
     background:gold;
     margin:0px auto;   
 }

3.css文本属性

  • color 设置文字颜色
  • font-size 设置文字大小
  • font-family 设置文字字体
  • font-weight 设置文字是否加粗
  • line-height 设置文字的行高，如：line-height：24px；表示文字高度叫文字上下间距是24px，一行的高度就是24px
  • text-decoration 设置文字的下划线
  • text-align 设置文字水平对齐的方式
  • text-indent 设置文字首行缩进

4.css载入方式

css样式的引入有三种：

  1. 行间的样式：通过标签的style属性，在标签上直接写样式（直接修改行间style属性，级别最高）

    <div style="width:100px; height:100px; background:red ">......</div>

  2. 内嵌式：通过style标签，在网页上创建潜入的样式表

    <style type="text/css">
    div{ width:100px; height:100px; background:red }
    ......
</style>

  3. 外联式：通过link标签，链接外部样式文件到页面

    <link rel="stylesheet" type="text/css" href="css/main.css">

CSS进阶用法

1.列表标签

快速创建列表：

ul>li*4
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

ul>(li>a)*4
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>

列表相关样式

list-style 去掉列表想的小圆点：list-style ：none

2.html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

  1. <form>标签 定义整体的表单区域

    • action属性 定义表单数据提交地址

    • method属性 定义表单提交方式 get/post

  2. <label>标签 为表单元素定义文字标注

  3. <input>标签 定义通用的表单元素

    • type属性

      • type=“text” 定义单行文本输入框
      • type=“password” 定义密码输入框
      • type=“radio” 定义单选框
      • type=“checkbox” 定义复选框
      • type=“file” 定义上传文件
      • type=“submit” 定义提交按钮
      • type=“reset” 定义重置按钮
      • type=“button” 定义一个普通按钮

    • value属性 定义表单元素的值

    • name属性 定义表单元素的名称，此名称是提交数据的键名

  4. <textarea>标签 定义多行文本输入框

  5. <select>标签 定义下拉表单元素

  6. <option>标签与<select>标签配合，定义下拉表单元素中的选项

注册表单实例

<form action="#" method="#">
        <h3>注册表单</h3>
        <p>
            <label>姓名</label>
            <input type="text" name="username">
        </p>
        <p>
            <label>密码</label>
            <input type="password" name="password">
        </p>
        <p>
            <label>性别</label>
            <input type="radio" name="gender" value="0"> 男
            <input type="radio" name="gender" value="1"> 女
        </p>
        <p>
            <label>爱好</label>
            <input type="checkbox" name="like" value="running"> 跑步
            <input type="checkbox" name="like" value="reading"> 阅读
            <input type="checkbox" name="like" value="guitar"> 吉他
            <input type="checkbox" name="like" value="basketball"> 篮球
        </p>
        <p>
            <label>头像</label>
            <input type="file" name=person_pic>
        </p>
        <p>
            <label>籍贯</label>
            <select name="site">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
            </select>
        </p>
        <p>
            <label>简介</label>
            <textarea name="about"></textarea>
        </p>
        <p>
            <input type="reset"  value="重置">
            <input type="submit" value="提交">
        </p>
    </form>

表单常用样式、属性及实例

  • outline 设置input框获得焦点时，是否显示凸显的框线，一般设置为没有：outline：none；
  • placeholder 设置input输入框默认提示文字

3.表格

  1. <table>标签 声明一个表格
  2. <tr> 定义行
  3. <td>和<th> 标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

表格样式相关属性

border-collapse 设置表格的边线合并 ：border-collapse ：collapse

#tr>th*4
        <tr>
            <th>name</th>
            <th>age</th>
            <th>address</th>
            <th>score</th>
        </tr>
#(tr>td*4)*4
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

4.css显示特性

display属性是用来设置元素的类型及隐藏，常用属性有：

  1. none 元素隐藏且不占位置

  2. inline 元素以行内元素显示

  3. block 元素以快元素显示

5.css元素溢出

当子元素尺寸超过父元素的尺寸时，需要通过overflow属性设置父元素显示溢出的子元素

设置项：

  • visible 默认值，内容不会被剪裁，会显示在父元素框之外
  • hidden 内容会被剪裁，并且其余内容是不可见的
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
  • auto 如果内容被修剪，浏览器会显示滚动条以便查看其余的内容

css高级进阶

1.定位

文档流

元素按照html中标签编写的顺序一次从上到下，从左到右排列，块元素独占行元素共享一行

关于定位

可以使用css的position属性设置对元素的定位，设置选项如下：

  • relative 生成相对定位元素，一般将父级元素设置为相对定位，子元素设置为绝对定位，子级参照父级元素进行定位，否则参照body来定位

  • absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解漂浮在文档流之上，相对于上一个设定了定位的父级元素进行定位，找不到参照body

  • fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解漂浮在文档流之上，相对浏览器窗口定位

定位元素层级

定位元素是漂浮在文档流之上的，可以通过设置z-index设置元素的层级

.box01{
    ......
    position:absolute;  /* 设置了绝对定位 */
    left:200px;            /* 相对于参照元素左边向右偏移200px */
    top:100px;          /* 相对于参照元素顶部向下偏移100px */
    z-index:10          /* 将元素层级设置为10 */
}

设置漂浮子元素透明度

/* 设置元素透明度,将元素透明度设置为0.3*/
opacity:0.3;

2.权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式

权重的等级

内联样式，如style=“”，权重1000

ID选择器，如#content，权重1000

类、伪类，如：.content、:hover权重值为10

标签选择器，如div 、p标签权重值1

例1：

<style type="text/css">
    div{
        color:red;
    }        
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为1，下面的行间样式的权重值为1000，
所以文字的最终颜色为blue 
-->

例2:

<style type="text/css">

    body #content .main_content h2{
        color:red;    
    }

    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>
<!-- 
第一条样式的权重计算： 1+100+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->

前端页面流程顺序

  1. 创建项目目录

    一般先创建一个总目录，然后在此目录创建images、css、js三个目录，三个目录分别存放图片、css文件以及js文件

  2. 切图

    通过Photoshop对网页效果图进行切图，所使用图片需要是带图层的psd格式

  3. 新建html文件，新建css文件

  4. 参考效果图，编写html和css代码

猜你喜欢

转载自blog.csdn.net/weixin_42386300/article/details/83536205
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
Ubuntu 14.04 下Fuel6.0安装部署
香港一小巴侧翻致1死16伤 警方：未见机件故障
pikachu--XSS盲打
阅读 深入理解JVM虚拟机笔记一
java.sql.SQLException: ORA-00932: 数据类型不一致: 应为 -, 但却获得 CLOB
oracle delete all object under an user
[LeetCode]20 Valid Parentheses 有效的括号
树形DP求树的直径 【模板】
Context propagation over HTTP in Go
【PAT】（B）1053 住房空置率 (20)*
每日归档
更多
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022