html+css基础知识

最新推荐文章于 2019-04-20 21:25:37 发布

polopi

最新推荐文章于 2019-04-20 21:25:37 发布

阅读量248

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/polopi/article/details/79446023

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

设置css样式 p{color:blue} p选择器+声明{ 属性:值 }

html标签选择器 <style>
span{}

</style>

id选择器使用#标识符 <style>
        #id{}
        </style>
id选择器只能在文档中使用一次，具有唯一性，类似身份证号码

类选择器使用.标识符 <style>
        .class{}
        </style>
类选择器可以使用多次

子选择器 > <style>
.class>span{}
</style>
子选择器作用于元素的第一代后代(例如列表对 li 使用子选择器只对最外层 li 元素起作用)

空格选择器
<style>
.class li{}
</style>
空格选择器作用于元素所有后代(例如列表对 li 使用空格选择器会对所有li元素产生作用)

通用选择器 *
<style>
*{}
</style>
通用选择器匹配html中所有标签元素

伪选择器
<style>
a:hover{}
</style>

伪选择器允许给html不存在的标签（标签的某种状态）设置样式，例如给<a></a>标签设置鼠标滑过的状态来设置字体颜色
，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了

分组选择器，
<style>
h1,span{}
</style>

分组选择器可以为html中多个标签元素设置同一个样式

选择器权值
p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

以上例子为同一个元素设置了两种不同的样式，最终显示的是green

继承权值最低，标签的权值为1，类选择器的权值为10，ID选择器的权值最高为100，浏览器会根据权值来判断使用哪种css样式

当同一个元素有多个相同权值的css样式，则处于最后面的css样式会被应用

!important

p{color:red !important;}
#注意：!important要写在分号的前面
p.first{color:green;}

本来是显示green ，由于在样式里面添加!important(最高权值) ，所以显示红色
设置字体

body{font-family:"Microsoft Yahei";} #微软雅黑

文字排版--字号，颜色
body{font-size:12px;color:#666}

文字排版--粗体

body{font-weight:bold;}

文字排版--斜体
body{font-style:italic;}

文字排版--下划线
body{text-decoreation:underline;}

文字排版--删除线
body{text-decoration:line-through;}

段落排版--缩进
p{text-indent:2em} #缩进文字的两倍大小

段落排版--行高
p{line-height:1.5em}

段落排版--中文字间距，字母间距
中文：p{letter-spacing:20px;} #如果letter-spacing设置英文，是设置字母间距
英文：p{word-spacing:20px;} #英文单词间距（对中文无效）

段落排版--对齐
div{text-align:center} #left right

CSS使用方式

内联式直接把css代码写在现有的html标签中 <p style="color:red">这里文字是红色。</p>

嵌入式把css代码样式写在 <style type="text/css"> </style>标签之间

外部式把css代码写在一个独立的外部文件中，

后缀名为.css 使用方式是在<head></head> 标签之间<link href="style.css" rel="stylesheet" type="text/css" />

优先级：内联式 > 嵌入式 > 外部式

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

阴影效果：box-shadow：h-shadow v-shadow blur spread color inset

水平阴影垂直阴影模糊距离阴影尺寸颜色内部阴影(默认外部)

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

元素分类--块级元素

a{display:block;} #把内联元素a转换为块状元素

特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行。

元素的高度，宽度，行高以及顶边和底边距都可以设置

元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度

元素分类--内联元素

div{display:inline;} #把块级元素div转换为内联元素

特点：和其他元素在同一行上

元素的高度，宽度，行高以及顶边和底边距都不能设置

元素宽度就是它包含的文字或者图片的宽度，不可改变

元素分类--内联块状元素

div{display:inline-block;} #把块级元素div转换为内联块状元素

特点：和其他元素在同一行上

元素的高度，宽度，行高以及顶边和底边距都可以设置

盒子模型--边框

缩写：
div{
border: 2px solid #888
}
分开写
div{
border-width:2px;
border-style:solid;
border-color:red;
}

border-style常见样式有：dashed(虚线)|dotted(点线)|solid(实线)

border-width中的宽度也可以设置为：thin|medium|thick ,最常用的是像素(px)

边框设置有4个方向:border-bottom,border-top,border-left,border-right ,可以单独设置。

盒子模型--宽度和高度

一个盒子的宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
左边界：margin-left
左边框：border-left
左填充：padding-left
内容宽度：width
右填充：padding-right
右边界：border-right
右边界：margin-right

盒子模型--填充

div{padding:20px 10px 10px 10px;} #顺序为上，右，下，左，（顺时针）

如果4个方向填充的宽度都一样，则可以div{padding：10px;}

如果上下为10px，左右为20px，则可以div{padding:10px 20px;}

盒子模型--边界

div{margin: 20px 10px 10px 10px;} # 顺序为上，右，下，左,(顺时针)

如果4个方向边界的宽度都一样，则可以div{margin:10px;}

如果上下为10px，左右为20px，则可以div{margin:10px 20px;}

maring 在边框外 paddiing在边框里

CSS 布局模型

在网页中，元素有3种布局模型

流动模型(Flow)

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
内联元素都会在所处的包含元素内从左到右水平分布显示

浮动模型(Float)

设置元素浮动
div{
width:200px;
height:200px;
border:2px red solid;

float:left
}
<div id="div1"></div>
<div id="div2"></div>

设置float:left 可以使两个块级元素并列一行显示 left是左浮动 right是向右浮动

层模型(Layer)

绝对定位(position:absolute)

div{
position:absolute;
left:20px;
top:100px;
}

#上述代码实现div元素相对于浏览器窗口向右移动20px，向下移动100px。偏移的方向和幅度由left right top bottom 属性确定

相对定位(position:relative)

div{
position:relative;
left:20px;
top:100px;
}

#相对位置偏移前的位置保留不变，即div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着

固定定位(position:fixed)

#与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。

由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，

或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，

不会受文档流动影响，这与background-attachment:fixed?属性功能相同。

Relative与Absolute组合使用

两者结合使用可以让元素不限于相对浏览器定位或者网页窗口定位，而是可以灵活的相对于其他元素定

有以下规则：

1.参照定位的元素必须是相对定位元素的前辈元素
<div id="box1"> 
<div id="box2">
相对参照元素进行定位
</div>
</div>

# box1是box2的父元素

2.参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}

3.定位元素加入positon:absolute，就可以使用top right bottom left进行偏移定位
#box2
{
position:absolute;
top:30px;
left:30px;
}

这样box2就可以相对于父元素box1定位了

字体缩写
body{
font-size:italic; #斜体
font-variant:small-caps;#小型大写字体
font-weight:bold;#粗体
font-size:12px;
line-height:1.5em;#行距
font-family:"宋体",sans-serif; #sans-serif就是无衬线字体在font-family后面加上sans-serif是因为如果宋体不能显示则显示sans-serif字体
}

可以缩写为
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}

#
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

长度值

比较常用到的是 px em %百分比，其实三种都是相对单位

1.px像素
像素指的是显示器上的小点(css规范中假设"90像素=1英寸")

2.em
就是本元素给定字体的font-size值，如果元素的font-size为14px，那么1em=14px，如果font-size为18px，那么1em=18px

p{font-size:12px;text-indent:2em;}

以上代码实现段落首行缩进24px(也就是2个字体的大小)

#注意，当给font-size设置单位为em是，此时计算的标准以p的父元素的font-size为基础

<p>以这个<span>例子</span>为例。</p>

css：
p{font-size:14px}
span{font-size:0.8em;}

此时span中的字体大小就为14*0.8=11.2px

3.百分比

p{font-size:12px;line-height:130%}

此时行距为字体的130%

水平居中设置-行内元素

如果被设置元素为文本，图片等行内元素时，水平居中是通过给父元素设置 text-align:center;

<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>

</body>

上述代码父元素是div 子元素时文本：我想要在父容器中水平居中显示

<style>
.txtCenter{
text-align:center;
}
</style>

水平居中设置-定宽块状元素

定宽块状元素：块状元素的宽度width为固定值

满足定宽和块状两个条件的元素可以设置左右margin值为auto来实现居中
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>

水平居中设置-不定宽块状元素

1.加入table标签

为需要设置的居中的元素外面加入一个table标签（包括<tbody><tr>td>>

2改变块级元素的display为inline类型，然后用text-align:cencer；

3.通过给父元素设置float，然后给父元素position:relative和left：50%，子元素设置position:relative和lef（-50%）

<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>

假想UL层的父层（即div层）中间有条平分线将ul层的父层（div）平均分为两份，

ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；

而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中

<style>
.container{
float:left;
position:relative;
left:50%
}

.container ul{
list-style:none;
margin:0;
padding:0;

position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

垂直居中-父元素高度确定的单行文本

父元素高度确定的单行文本

line-height 行高 = 上行间距+font-size+下行间距

上行间距=下行间距=1/2 * 行间距

height为div高度，当height=line-height时，上行间距=下行间距，达到垂直居中

<div class="container">
hi,imooc!
</div>

<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
垂直居中-父元素高度确定的多行文本

插入table（包括tbody，tr，td），同时设置vertical-align:middle;

css中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的资源上都有用

<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
因为td标签默认情况下就设置了vertical-align:middle;所以我们不需要显式的设置了

隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1. position : absolute

2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，

元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，

当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

推荐学习地址：https://www.imooc.com/

polopi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css基础知识

设置css样式 p{color:blue} p选择器+声明{ 属性:值 }html标签选择器 &lt;style&gt; span{} &lt;/style&gt;id选择器使用#标识符 &lt;style&gt; #id{} &lt;/style&gt;id选择器只能在文档中使用一次，具有唯一性，类似身份证号码类选择器使用.标识符 &lt;st...
复制链接

扫一扫