关于对CSS学习的总结

小高睡不醒..

已于 2022-11-07 15:58:23 修改

阅读量2.6k

点赞数 8

分类专栏： HTML\CSS\JS 文章标签： css

于 2021-02-25 20:43:53 首次发布

本文链接：https://blog.csdn.net/Sugger_99/article/details/114095735

版权

HTML\CSS\JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

W3C

World Wide Web Consortium的缩写，中文是W3C组织或者万维网联盟。
W3C标准或者叫web标准 web标准是一系列的标准。

结构层： HTML 用于描述网页的展示结构；
表现层： CSS 用于修饰装饰网页的美观度；
行为层: JavaScript 用于完成页面的组件；

CSS

CSS是Cascading Style Sheet的缩写，翻译为“层叠样式表”，简称“样式表”。
主要用于修饰 html xhtml html5 xml 让网页有这种千变万化的形式
语法：选择符{属性：值}
body{font-size:12px;}

CSS书写的四种格式
选择器：

HTML标签选择器：在HTML页面中使用的标签，如果在CSS中被定义，那么此网页的所有该标签都将按照CSS中定义的样式显示。
类选择器：使用HTML标签的class属性引入CSS中定义的样式规则的名字，称为类选择器，class属性指定的样式名字必须是以“.”开头。
ID选择器：ID属性是用来定义某一特定的HTML元素，与class属性刚好相反，class属性是用来定义一组功能或格式相同的HTML元素。ID选择器定义的CSS名称必须以“#”开头，
通用选择器：是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有可用元素。
伪类选择器：是指对同一HTML元素的各种状态和其所包括的部分内容的一种定义方式。
Id的优先级高于class

1、内嵌式引入： 把style标签嵌套在head标签中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{font-size:36px;}
	
	</style>
</head>
<body>
<p>一些老的<b>浏览器不支持 iframe。</b></p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>

2、行内样式

<b style="font-size:56px;">浏览器不支持 iframe。</b>

3、外链样式把css当成是一个文件，通过link标签引入到html中

<link rel="stylesheet" type="text/css" href="css/main.css">

4.、嵌入样式内嵌和外链一种综合性的使用，不太常用

<style type="text/css">
  @import url("css/style.css");
</style>

样式的显示取决于距离，即显示距离目标最近的样式
可以连接多个html应用到html里面

行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常

需要混合使用：

• 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css

• 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式

• 某张网页内，部分内容”与众不同“，采用行内样式

CSS的特点：
1、继承：
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
2、层叠：
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式
后面定义的样式，会覆盖前面定义的样式。

该语法中的4个属性值可以任意选择其中一个。其中，left代表左对齐方式；right代表右对齐方式；center代表居中对齐方式；

Text-align 它只能控制文本是否居中不能控制div是否居中
如果想让div居中要通过盒子模型中margin:0 auto;

所有的网页都要有hn标签利于搜索引擎搜索
text-indent：-9999em；去隐藏页面的标题。
Text-transform 用于大小写字母转换

设置重复背景图片——background-repeat
background-repeat:repeat|repeat-x|repeat-y|no-repeat
设置背景图片位置——background-position

伪类

状态	语法
未访问链接	a:link{color:#ff0000}
已访问链接	a:visited{color:#00ff00}
鼠标移动在链接上	a:hover{color:#ff00ff}
鼠标按下到链接上	a:active{color:#0000ff}

盒子模型
内边距 padding 用于填充内容内部
外边距 margin 用于描述浏览器边缘到内容的之间的距离
边框 border：1px solid black
像素值实线颜色

margin：100px 上下左右都是100px的距离
margin：100px 200px；上下100px、左右 200px
margin：100px 200px 300px 上100px 左右 200px 下300px
margin：100px 200px 300px 400px 上、右、下、左

margin-top margin-left margin-right margin-bottom
边框也适用于4个方向

块状元素和内联元素
块状元素具有高度和宽度的属性，但是它不允许其他元素和它同行显示
代表标签 div p 等等
块状元素的默认属性： display:block;

内联元素不具有宽度和高度的属性允许其他元素与其同行显示
代表标签 a span
内联元素的默认属性 display:inline;

块状元素和内联元素之间可以进行转换
Display：none 可以隐藏元素

设置盒子
1、在使用边框颜色复合属性border-color时，如果只设置1种颜色，则四条边框的颜色一样；设置2种颜色，则边框的上下为一个颜色，左右为另一个颜色；设置3种颜色，边框的颜色顺序为上、左右、下；设置4中颜色，边框的颜色顺序为上、右、下、左。

2、边框宽度属性border-width是一个复合属性，可以同时设置四条边框的宽度。

3、border-style是一个复合属性，其他4个都是单个边框的样式属性，只能取一个值，而复合属性border-style可以同时取一到4个值。下面分别说明border-style属性的4个取值方法：
— 取一个值：四条边框均使用这一个值。e:s
— 取两个值：上下边框使用第一个值，左右边框使用第二个值，两个值一定要用空格隔开。
— 取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值，取值之间要用空格隔开。
— 取4个值：四条边框按照上、右、下、左的顺序来调用取值。取值之间也要用空格隔开。

布局
1、定位布局：
属性：positon
描述：设置对象的定位方式
值：
static 静态定位：页面中的每一个对象的默认值。
absolute 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
relative 相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位。

2、浮动布局：
浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。

基本语法：
float:left|right|none
left 表示浮动元素在左边，是居左对齐的。
right 表示浮动元素在右边，是居右对齐的。
none 表示不浮动，是默认值。

3、清除浮动
当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响。
清除：clear

基本语法
clear:left|right|both|none
left 表示不允许在某元素的左边有浮动元素。
right 表示不允许在某元素的右边有浮动元素。
both 表示在某元素左右两边都不允许有浮动元素。
none 表示在某元素左右两边都允许有浮动元素。

overflow
visible [默认值。不剪切内容也不添加滚动条]，
auto [在必需时对象内容才会被裁切或者显示滚动条]，
hidden [ 不显示超过对象的尺寸的内容]，
scroll [总是显示滚动条]

3种隐藏元素的方法：