CSS基础

CSS (Cascading Style Sheets)层叠样式表

主要功能是指定文档该如何呈现给用户

简介

1994年哈肯·维姆·莱、伯特·波斯(Bert Bos)两人一起合作设计的CSS。
1997年由W3C接管,进行标准化规范
CSS现共有3个版本:
CSS1 现已废弃
CSS 2.1 现目前世界上支持最广泛的版本
2011 年开始 CSS 被分为多个模块单独升级,统称为 CSS 3


如何引入CSS

1、内联style属性:把style属性样式写在标签内,
style标签,一般写在head里面,用花括号包住,加上标签属性
例如:


我在head里面写一个关于body的颜色,h1的颜色以及文字居中的CSS样式,只是如果CSS样式多了的话就不太适合。
2、外部样式:将CSS文件单独写,然后用link标签引入

3、有时资源文件较多, 一个个的写较麻烦, 这样可以使用@import url();这种写法引入.


布局

float浮动:横向左右结构

分两步:

  • 首先给所有子元素加上float left
  • 给他们的父元素标签上加上"class= clearfix"
CSS标签中添加clearfix的样式  
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
左中右布局

采用了绝对定位的方法 设置总宽度,然后分布设置左中右三个的宽度具体如下:
1、新建一个使用id绝对定位的html文档

left_side
content

2、设置CSS

cs{  
    width:700px;  
    margin:0 auto;  
}  

container{  
    position:relative;  
    margin:20px;  
    height:400px;  
}  
left{  
    position:absolute;  
    top:0px;  
    left:0px;  
    border:solid 1px #0000FF;  
    width:170px;  
    height:100%;  
}  
content{  
    margin:0px 190px 0px 190px;  
    border:solid 1px #0000FF;  
    height:100%;  
}  
right{  
    position:absolute;  
    top:0px;  
    right:0px;  
    border:solid 1px #0000FF;  
    width:170px;  
    height:100%;  
}  

注:同时position:absolute; position:relative; 是另一个脱离文档流
意思是我要脱离文档流,但是我还要和你定位

最终效果如图:


CSS基础_第1张图片
image.png
细节知识点

1、块级元素的高度是由他里面所有文档流元素的总和决定
文档流:文档内元素的流动方向 内联元素从左往右流动 ,块级元素从上往下每个块级占一行宽度不够会另起一行
2、脱离文档流:
影响div的高度,脱离了之后,就影响不了父元素的高度,
其中一种脱离方式:position: fixed 用于导航栏,悬浮一直存在
3、文字的水平居中
将一段文字置于容器的水平中点,只要设置text-align属性即可:
text-align:center;
4、容器的水平居中
先为该容器设置一个明确宽度,然后将margin的水平值设为auto即可。

div#container {
     width:940px;
     margin-left:auto
     margin-right:auto
  }

border:1px solid red:设置一个1像素的红色边框,用于查看大小位置等,很方便,使用完了删掉即可
font-size:字体大小
font-weight:bold :字体加粗
color:颜色
text-decoration :字体装饰 例如下划线、中划线、顶划线、删除线或者闪烁
最大宽度:
max-width:940px最大宽度不能超过940px,最大宽度要比直接设置宽度属性好一些

margin:设置外边距属性
四个外边距属性设置分别是 margin-top margin-bottom margin-left margin-right

padding:设置内边距属性
padding-top padding-bottom padding-left padding-right

margin和padding的区别
margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)
padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)


完!

你可能感兴趣的:(CSS基础)