博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
08.21学习笔记
阅读量:5061 次
发布时间:2019-06-12

本文共 1730 字,大约阅读时间需要 5 分钟。

 

第二天

样式,css

浏览器只是html的环境,所以浏览器可以加载标签。除了html,其他的我们统统叫做资源。

在html中添加css的几种方法:

第一种:行间样式

给标签添加一个style属性,在style属性中写样式属性。

style是标签属性,color是样式属性

第二种:行内样式

在head标签中添加style标签,所有的样式属性都写在style中。

选择器:就是取一个可供选择的名字

1、标签名:原有的标签名 如h、p、a等

2、id名:唯一的一个名字

    

 

3、类名 class:可以有多个

 

标签名:p{...},id名:#xie{...},类名:.dier{...}

取名可以取a1 但不能取1a,名字尽量语义化 

 

选择器权重:同时满足三个选择器时,以权重来计算最终结果。

 

标签权重为:1      类的权重为:10     id的权重为:100    行的权重为:1000

css常见样式

字体:font

    颜色:color:red

    大小:font-size:20px;20是数字 px是像素 默认字体nt是16px

    样式:font-style:normal;   正常

                              :italic;      斜体

                             :oblique;   倾斜

     字形:font-family:"微软雅黑"(除了汉子调成中文,其他无论什么都输英文格式

      

图片:img

       宽  width:200px

       高  height:200px

       

第三种:外部引入

        新建css文件,专写样式,再html中引用该资源。

        <link rel="stylesheet" type="text/css" href="路径">

        

div 盒模型

div是标签,是一个模块,方便我们页面排版。

div是个标签,做项目时,需看到盒子占的空间,

常用属性:宽、高、边框

边框:border

     边框样式:boeder-style:solid(实线)/dashed(虚线)

     边框颜色:border-color:red

     边框粗细:border-width

     这三个可以简写: border:1px solid blue

div的边距:

外边距:margin    内边距:padding

maegin-top;margin-right;margin-bottom;margin-left。注意顺序

常见的margin设置方式:

margin:10px;代表上右下左都是10px

margin:10px 20px;代表上下是10px 左右是20px

margin:10px 20px 30px ;代表上是10px 左右是20px 下是30px

margn:10px 20px 30px 40px;代表上右下左(顺时针)

margin:20px auto;上下都是20px 左右平均,效果是水平居中

备注: 两个挨着元素,当外边距有重叠时,按最大的值,不会叠加。上面的两个div

最终实际外边距是30px

 文本样式:text

文本对齐方式:text-align:center/left/right/justify;

文本缩进::text-indent:20px;

文本样式:text-decoration:none/underline;

 表格:table

         表格标签:<table></table>

         行标签:<tr></tr>(无列)

         单元格:<td></td>

         快捷方式:tr * 3 > td * 3    Tab

      单元格合并:

         水平合并 colspan=”3”

         上下合并 rowspan=”2”

 

块级元素、行级元素

        块级元素:不管内容多少,他都会独占一行。

               优点:方便写网页结构,缺点: 浪费太多排版。

     特点:可以设置宽高,常见的 div p li ul

   行级元素:不管内容多少,不会独占一行。

      优点、特点:与块级相反

 

块级变成行级 :在块级css样式上加个属性  display:inline;

行级变块级:   在行级css样式上加个属性  display:block;

行级块元素   给这个标签加属性       display:inline-block;  既能设置宽高,又能在一行。 

转载于:https://www.cnblogs.com/wangxin0429/p/9513925.html

你可能感兴趣的文章
大数据学习系列(8)-- WordCount+Block+Split+Shuffle+Map+Reduce技术详解
查看>>
【AS3代码】播放FLV视频流的三步骤!
查看>>
枚举的使用
查看>>
luogu4849 寻找宝藏 (cdq分治+dp)
查看>>
日志框架--(一)基础篇
查看>>
关于源程序到可运行程序的过程
查看>>
转载:mysql数据库密码忘记找回方法
查看>>
scratch少儿编程第一季——06、人在江湖混,没有背景怎么行。
查看>>
【贪心+DFS】D. Field expansion
查看>>
C# Async与Await的使用
查看>>
Mysql性能调优
查看>>
iOS基础-UIKit框架-多控制器管理-实例:qq界面框架
查看>>
IOS-每个程序员的编程之路上都应该看这11本书
查看>>
自定义tabbar(纯代码)
查看>>
小程序底部导航栏
查看>>
ibatis学习笔记
查看>>
18-ES6(1)
查看>>
poj1611 简单并查集
查看>>
Ubuntu 14.04下安装CUDA8.0
查看>>
跨平台开发 -- C# 使用 C/C++ 生成的动态链接库
查看>>