关于对CSS学习的总结

时间:2021-2-27 作者:admin

关于对CSS学习的总结

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、层叠:
网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖掉父元素的样式
后面定义的样式,会覆盖前面定义的样式。

常用样式属性:

CSS 说明
颜色 color
字体大小 font-size
字体 font-family:Arial,‘宋体’
文本对齐 text-align
文本缩进 text-indent:2em 可以为负值
行高 line-height:150% line-height:1.5em
字体粗细 font-weight:normal[正常]bold[粗体]
边框样式 border-style
边框宽度 border-width
边框颜色 border-color
上边距 top
左边距 left
宽度 width
高度 hight
背景颜色 background-color
背景图片 background-image

• 语法说明

该语法中的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种隐藏元素的方法:

  1. display:none
  2. width:0 height0
  3. overflow:hidden

zoom
缩放:
normal:默认值。使用对象的实际尺寸
number:百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值
zoom:1 解决ie6高度自适应问题

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。