认识CSS

最新推荐文章于 2024-08-24 13:47:49 发布

hbb_12138

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量121

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/hbb_12138/article/details/107283012

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS基础与总结

一.初始CSS

1.什么是CSS

CSS：层叠样式表（Cascading Style Sheet）是由一堆选择器和属性组成。
CSS有两个版本：CSS2.0 和 CSS3.0，CSS3.0是CSS2.0的设计版本，增加了一些选择器和属性。
CSS的主要作用是用来美化html(超文本标记语言)，通过浏览器渲染出一张张美丽的网页。

2.CSS布局的优点

1.用户体验好，视觉体验极佳，网站的性能高。
2.便于网站的更新升级，维护性好。
3.便于团队开发。
4.能够适应不同的显示器。

二.CSS基本语法

1.引入CSS的三种方式

行内样式（直接写在标签中格式:styel=" "）

 <div style="width: 200px;height: 200px;border:1px solid   red";>
  </div>

内部样式（写在<.style>标签中,<.style>写在head部分）

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>    
<style>        .
box {   
 width: 200px;       
 height: 200px; 
  border: 1px solid red; 
  }  
  </style>
  </head>
  <body>
  <div class="box">
  </div>
  </body>
  </html>

外部样式（通过<.link>标签引入外部样式）

<link rel="stylesheet" href="./css/index.css">

2.CSS选择器

1.id选择器

<style>      
 #box {           
  width: 200px;          
  height: 200px;        
  border: 1px solid red;       
}
</style>

2.类选择器

<style>      
 .box {           
  width: 200px;          
  height: 200px;        
  border: 1px solid red;       
}
</style>

3.标签选择器

<style>      
 p {           
  width: 200px;          
  height: 200px;        
  border: 1px solid red;       
}
</style>

4.后代选择器

<style>      
 .box p {           
  width: 200px;          
  height: 200px;        
  border: 1px solid red;       
}
</style>

5.交集选择器

<style>      
.box.p {           
  width: 200px;          
  height: 200px;        
  border: 1px solid red;       
}
</style>

6.分组选择器

<style>      
 .box,p {           
  width: 200px;          
  height: 200px;        
  border: 1px solid red;       
}
</style>

7.伪类选择器

<style>      
 .box:hover {           
  width: 200px;          
  height: 200px;        
  border: 1px solid red;       
}
</style>

3.CSS属性

3.1表格类的属性

设置边框 border = “xx”
设置单元格间距 cellspacing = " xx"
设置背景颜色 bgcolor = “xx”
设置对齐方式 align = " xx" left:左对齐，center:居中，right: 右对齐
设置宽高 width height

3.2表单类的属性

设置表单的type = “xx” 属性值： button checkbox file hidden image password radio resets ubmit text
value 规定 input 元素的值。
width height 设置宽和高
placeholder 帮助用户填写输入字段的提示

3.3列表类的属性

width height 设置宽和高
经典应用 list-style: none 去除默认的小点

3.4 字体类的属性

font-style 设置字体样式
font-size 设置字体大小
text-align 设置字体再盒子中的对齐方式
color 设置字体颜色
line-height 设置行高经典应用用来设置字体在盒子中垂直居中，行高等于盒子的高度

3.5文本类的属性

line-height 设置文本的行高
color 设置字体颜色
font-size 设置字体大小

三.盒子模型

1.盒子的六大属性

盒子的内容 width height
盒子的内填充也叫补白
padding 10px 表示上右下左的padding为10px
padding 10px 20px 表示上下 padding 为10px 左右的padding为20px
padding 10px 20px 30px 表示上 padding 10px 左右 padding 为10px 下 padding为30px
padding 10px 20px 30px 40px 表示上 padding 为10px 右的padding为20px 下padding 30px 左 padding 40px
盒子的边框 border
盒子的外边距 margin 经典应用 margin：0 auto；设置盒子水平居中。
margin 10px 表示上右下左的 margin 为10px
margin 10px 20px 表示上下 margin 为10px 左右的 margin 为20px
margin 10px 20px 30px 表示上 margin 10px 左右 margin 为10px 下 margin 为30px
margin 10px 20px 30px 40px 表示上 margin 为10px 右的 margin 为20px 下 margin 30px 左 margin 40px
盒子的背景 background 背景颜色 background-color ，背景图片 background-imge

2.盒子的分类
盒子可分为块级元素，行内元素，行内块元素。
块级元素：独占一行可设置宽高，主要有 hn p 表格类的标签列表的标签…
行内元素：并排显示不可设置宽高，宽度由盒子内的内容撑开可以设置左右的margin和padding，但是不可以设置上下的margin和padding 。主要有 a strong em span …
行内块元素：除了可以并排显示还具有块级元素的特点，主要由 input image …

四.浮动布局

1.浮动布局的特点

浮动的初衷是用来实现字围效果。
浮动的元素半脱离标准文档流，可以让块级元素并排显示
两个浮动的元素会紧紧的贴在一起，如果后面的空间不够的话，它会自动换行。
行内块元素浮动起来后，半脱离标准文档流，可以设置宽和高

2.浮动元素带来的影响

对兄弟元素的影响
浮动可以让后面紧挨着的兄弟元素钻上去，但是文字不会，只是形成字围效果。可以用clear：both;清除浮动带来的影响。
对父盒子的影响
如果父盒子没有设置高度，且里面的子盒子全部浮动，则会造成父盒子塌陷（即高度为0）。解决塌陷的方法是在父盒子上加 overflow：hidden；清除浮动。
浮动的元素不会对前面的盒子产生影响。

hbb_12138

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识CSS

CSS基础与总结一.初始CSS1.什么是CSSCSS：层叠样式表（Cascading Style Sheet）是由一堆选择器和属性组成。CSS有两个版本：CSS2.0 和 CSS3.0，CSS3.0是CSS2.0的设计版本，增加了一些选择器和属性。CSS的主要作用是用来美化html(超文本标记语言)，通过浏览器渲染出一张张美丽的网页。2.CSS布局的优点1.用户体验好，视觉体验极佳，网站的性能高。2.便于网站的更新升级，维护性好。3.便于团队开发。4.能够适应不同的显示器。
复制链接

扫一扫