CSS简单基础总结

最新推荐文章于 2024-06-12 12:52:53 发布

金啊琦啊

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量171

点赞数

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

本文链接：https://blog.csdn.net/jinjina_/article/details/107268540

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS总结

一、CSS概念

1.什么是CSS

Cascading Style Sheet 层叠样式表

2.CSS的作用

实现网页布局，美化网页

3.主要学什么

学习CSS就是学习相关的选择器和属性。

4.CSS的版本

CSS主要分为CSS2和CSS3

5.引用CSS的三种方式

行内样式

在需要添加的标签后面直接加入style属性（在body中）

  <h1 style="color: red;">Hello</h1>

内部样式

在head中添加style标签

<style>
    h1{color: red;}
</style>
<body>
    <h1>hello</h1>
</body>

外部样式

在项目中单独添加CSS文件，后缀为.css，并在HTML文件中用Link标签进行引用

<link rel="stylesheet" href="hello.css" type="test/css">

问：如果当同一个HTML元素被多个样式定义时，应该用哪个样式呢？
答：优先性：行内样式>内部样式>外部样式

二、CSS的基本语法

CSS的主要两个模块：
    选择器：用来选中你需要进行美化或布局的标签
    声明：属性和值

例子：h1 {color:red; font-size:14px;}

在上述例子中，h1 是选择器，color和font-size是属性，red和14px是值。

1.CSS的选择器

选择器的作用：选中我们需要处理的标签或内容。

1)选择器的分类

标签选择器:
通过html标签名来选择元素，例如：hn,p,div…写为标签名 {属性:属性值;}

 h1{color: red;}

class选择器:
通过class名来选择元素，在对应标签中添加class属性，class，写法为 .class名{属性:属性值;}

<style>
   .text{color: red;}
</style>

<body>
   <p class="text">这是个class选择器</p>
</body>

id选择器:
通过id名来选择元素，对应的标签中增加一个id属性，通常为唯一的,写法为 #id名{属性:属性值;}

<style>
   #name{color: red;}
</style>

<body>
   <div id="name>这是个ID选择器</div>
</body>

2)使用选择器

统配选择器

给全局设置属性，表示所有的标签


*{magin:0;padding:0;}

后代选择器

选定某个标签的某种后代元素

div p{color:red;}

交集选择器

选中某个选择器中的某个类

div.name{color:red;}

伪选择器

a标签的hover,表示鼠标放上去显示的状态

a{ color: #000;text-decoration: none;}
a:hover{color: #f00;text-decoration: underline;}

三、CSS的属性分类

1.字体

有继承性：给父元素设置了，子元素也可以继承到，经典应用：给body设置字体相关的属性。

font-style:设置字体是否倾斜
1.normal 不倾斜
2.italic 倾斜

em: font-style:normal

font-weight:设置字体是否加粗
1.normal 不加粗
2.bold 加粗
3.bolder 更粗

h1:font-weight:normal; 
span:font-weight:bold;

font-size: 设置字体大小
1.谷歌浏览器默认是16px,用的最多是的12px 和 14px, 最小是12px

font-size:14px;

font-family: 设置字体类型

font-family:A,B,C,D;

font 复合属性

font:nomal nomal 14px/1.5 "宋体";

1.font:font-style font-weight font-size font-family;
2.font-style font-weight 可以不写也可以交换位置
3.font-size/line-height font-family 必须写但是能交换位置
4.font-size/line-height：表示字体和行高，14px/1.5代表行高是字体的1.5倍

color:设置字体颜色
对于a标签来说，需要选中a标签。

2.文本

text-decoration：设置文本的修饰线
1.underline 下划线
2.overline 划线
3.line-through 删除线
4.none 去除下划线

h1{color: red;text-decoration: underline;}
h2{text-decoration:overline;}
h3{text-decoration:line-through;}
a{text-decoration: none;}

text-indent：缩进文本

p{text-indent:2em;}

1.px:表示像素，大部分都是使用px
2.em:表示字体的高度，2em表示两个字体的高度

text-align：设置文本对齐的水平方式
1.left 水平向左默认值
2.center 水平向右
3.right 水平居中

h1{text-align：left;}
h2{text-align：right;}
h3{text-align：center;}

line-height：设置行高
1.line-height有两种设置方式，以px的形式，以倍数的方式，比如1.5，此时表示的是font-size的1.5倍。
2.也可以用line-height进行垂直居中，当行高等于高度是，就垂直居中了。

p{line-height:1.5}

3.列表

list-style-type 列表项符号/数字类型
1.none 无标记
2.disc 实心圆，默认
3.square 实心方块
4.等等…
list-style-position 列表项符号/数字的位置
list-style-image 给列表项使用图片作为符号/数字

4.表格

在html中表格有这几个标签table tr td/th

border-collapse：边框的合并
1.separate:双线边框模式 , 默认值
2.collapse：边框合并
caption-side：标题的位置
1.top：在表格的上方
2.bottom：在表示的下方

5.盒子模型

把一个个的标签当成一个矩形盒子进行布局。

盒子元素分为：
    块级元素（男标签）:独占一行
    行级元素（女标签）:并排显示
    行级块级元素（人妖标签）：除了可以并排显示 其它特点和男盒子一样  如：img input

盒子分为六大属性：

width: 宽度
height：高度
border：边框
padding：内边距补白
margin：外边距
background：背景

一个盒子在网页上占据的空间：
宽度：内容区域（width）+内填充区域(左右)+边框（左右）+外填充区域（左右）
高度：内容区域（height）+内填充区域(上下)+边框(上下)+外填充区域(上下)

盒子内容区域：width和height组成
1.不是只整个盒子的宽和高，是指盒子里的内容的大小
2.注意：
不设置默认，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
不设置高度，男盒子的高度是内容的高度，
对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。
盒子的内填充区域：盒子内容区域与边框border之间的间隙 padding
1.padding-top padding-right padding-bottom padding-left
2.padding是个复合属性：

padding:10px  <!-- 四个方向都是10px -->
padding:10px 20px;   <!-- 上下是10px  左右是20px -->
padding:10px 20px 30px;  <!-- 上是10px  左右是20px  下是30px -->
padding:10px 20px 30px 40px;   <!-- 上 右 下 左 -->

盒子的外填充区域：边框以外的间隙 margin

margin-top margin-right margin-bottom margin-left
margin是个复合属性：

margin:10px; <!-- 四个方向的margin都是10px -->
margin:10px 20px;   <!-- 上下是10px  左右是20px -->
margin:10px 20px 30px;   <!-- 上是10px  左右是20px  下是30px -->
margin:10px 20px 30px 40px;   <!-- 上 右 下 左 -->

3.注意：
对于行级元素来说，margin在垂直方向上是无效的
margin可以设置auto。表示尽可以大 div{ margin:0 auto; }
margin可以设置负值
对于块级元素来说，margin有重叠问题（塌陷问题）
塌陷可能是与父元素，也可能与兄弟元素。
塌陷原因前提一是男标签，二是垂直方向

border右三部分构成：
1.边框的粗细 border-widht
2.边框的样式 border-style

solid 实线
dotted 点画线
dashed 虚线
none 没有线

3.边框的颜色 border-color
4.border 是个复合属性：border:1px solid red;

background：背景
1.background-color:设置盒子的背景颜色背景颜色可以填充padding 也可以填充border
2.background-image:设置盒子的背景图片 img标签也是盒子也可以给img这个盒子设置背景图片
3.background-repeat: 控制是否平铺　
4.background-position: 对图片进行定位

6.浮动

文本可以按照需要围绕图片。使用浮动来让块级元素并排显示。

浮动元素的特点：
1）贴靠性如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
2）包裹性如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。
4）一个女盒子浮动了，设置宽度和高度，让女盒子就变成男盒子。

元素浮动会造成影响：
1）对父元素造成的影响
2）对后面的兄弟元素影响

清除浮动：
1）清除对父元素所造成影响

overflow:hidden；

height:xxxpx  <!-- 给父元素加高 -->

2)清除对兄弟元素所造成影响

clear:both 
<!-- clear: left/right/both    -->

溢出处理

问：如果出现div中的内容以及超出了其高度，在边框之外显示了或者与后续的内容重叠

overflow：hidden； <!-- 隐藏溢出的内容 -->

7.定位

金啊琦啊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS简单基础总结

CSS总结一、CSS概念1.什么是CSSCascading Style Sheet 层叠样式表2.CSS的作用实现网页布局，美化网页3.主要学什么学习CSS就是学习相关的选择器和属性。4.CSS的版本CSS主要分为CSS2和CSS35.引用CSS的三种方式行内样式在需要添加的标签后面直接加入style属性（在body中） <h1 style="color: red;">Hello</h1>内部样式在head中添加style标签
复制链接

扫一扫