CSS基础知识点总结

CSS 指层叠样式表 (Cascading Style Sheets)
用于格式化网页内容的技术

1.样式规则
内联 (内嵌)本标签style
内部 (内联)head里边style
外部 (外联)head里边link

样式用花括号括起来{}
建议简写,用于性能优化,font-size 简写为font

选择器和选择器用,隔开
div,p,form

呈现最近的元素

内嵌 > 内联 = 外联
后边两个看顺序

2.选择器
元素选择器:即标签选择器,div,p,等
名称{。。。}

类选择器:用. class
.名称{。。。}

id选择器:用#
#名称{。。。。}

CSS 派生,后代选择器;div span{}div下边的span
父选择器__子选择器{。。。}

下边的不常用:
CSS 子元素选择器 >
CSS 相邻兄弟选择器 +
属性选择器 []
CSS 伪类 动态的是伪类
伪元素 静态的是伪元素
相邻兄弟 选择器 + 选择器
子元素 父选择器 > 子选择器

*通配符:作用所有元素
*{margin:0
padding:0}
reset重置技术,用于浏览器的兼容问题

现在不用这个重置,现在用的都是normalize
需要哪些清零就哪些清零

必须掌握
伪类:用于添加一些特殊的效果
hover(鼠标移过去显示的效果)
firstchild

div:hover
或者div:hover img(div里边的img)

☆权重值(一定要说权重值)
一等 内嵌(开始标签,style) 1000
二等 id 0100
三等 类和伪类 0010
四等 元素和伪元素 0001

没有权重值 0000
*通配符
important:有个特例,让别的选择器权重失效,让自己权重值最高

权重值可累加,不可进位

3.css层叠

css继承
子元素父元素继承属性
可继承:颜色,字体

不可继承:margin,padding(外边距,内边距)

4.a标签的四种状态
a:link 无访问
a:hover 鼠标移入
a:visted 已访问
a:active 被选择

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

5.CSS样式
☆背景:图片(url),颜色(color),重复(no-repeat),大小(size),定位(position)

<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
background: url("12.jpg");
/*设置不重复填充界面*/
background-repeat: no-repeat;

/*这里可以用于填充整个边框界面大小,一般设置而为边框大小*/
background-size: 500px,500px;
}
</style>

☆文本:缩进(可以±),颜色,装饰(上划线,下划线),行间距,对齐方式,字间距,大小写

log用的文本缩进,图片。。。
/*a标签去掉下划线*/
a{text-decoration: none;}

垂直居中:vertical-align:middle;line-height:行高值
水平居中:text-align:center
居中方式可以用在其他地方,比如表格等等

文字
自定义字体:font-face常规用,这些字体传到服务器的,用的时候会下载
而不用字体系列,font-family这种智能用自己电脑的字体

font-weight:加粗(bold,bolder加粗更粗)
字体倾斜:font-style: oblique;
font-size:大小

☆列表:类型(.123等等),定位,图片(自定义图标)
列表做导航
ul li
取消小圆点或者其他点类型
/*设置列表前边的小圆点,可以设置其他*/
li{list-style: none;}

☆轮廓(少用):颜色,样式,宽度

CSS样式代码清单:
-----------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>

<!--关联 外部样式表,后缀名.css-->
<link rel="stylesheet" href="外部样式.css">

<!--内联,写在style-->
<style type="text/css">
div {width: 30px;color: red;font-size: 30px}

/*类选择器 ,前边没有加某个标签,默认是上边一个的类和id选择器*/
.span1{
color: lime;
}
/*id选择器*/
#span1{
color: brown;
}

/*在.和# 前边写了标签名,为这个标签的类和id选择器*/
p.small {line-height: 90%;

}
p.big {font-size: 200%}

p#123{
color: orange;
}

/*hover用于鼠标移动到这里的效果*/
div:hover{
background: yellow;
}
img:hover{
width:300px;
height:auto;
}

/*派生,后代选择器,表示div里边span的样式*/
div span{}
</style>

</head>
<body>

<img src="11.jpg" width="100" height = auto>

<div>
<p class="big">big</p>
<p class="small">small</p>
<p id="123">darkgreen</p>
</div>

<div class="span1">(.class)class="span1"</div>

<div id="span1">(#id)id="span1"</div>

<!--引用的外部样式,head里边link-->
<h1>ha</h1>

</body>
</html>
-----------------------------------------------------------------------

CSS样式代码清单:背景,其他格式,比如文字对齐方式等等
-----------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS框模型,定位</title>

<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
background: url("12.jpg");
/*设置不重复填充界面*/
background-repeat: no-repeat;

/*这里可以用于填充整个边框界面大小,一般设置而为边框大小*/
background-size: 500px,500px;
}

/*a标签去掉下划线*/
a{
text-decoration: none;
border: 1px solid red;
/*行高*/
line-height: 100px;
}

/*设置列表前边的小圆点,可以设置其他*/
li{
list-style: none;
}

</style>

</head>
<body>

<div></div>

<ul>
<li>s</li>
</ul>
<a href=""><br>我是一个链接</a>

</body>
</html>
-----------------------------------------------------------------------

在html里 pt 和px的区别是

pt——点。一般为网页中标识字体的单位。
px——像素。一般也为网页中标识字体的单位。
两种关系:一英寸=72pt(点)=96px(像素),网页中最常用到的:9pt=12px。
在Flash中一般也是字体的常用标识单位。

时间: 2025-01-02 15:54:30

CSS基础知识点总结的相关文章

CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应,另一列固定宽度

1:标有!important标记的样式 2:HTML编辑的样式 3:用户设置的样式 4:浏览器默认的样式 一列自适应,另一列固定宽度,个人认为如下方法比较好用 <!DOCTYPE html> <html> <head> <title> html5 </title> <link rel="stylesheet" type="text/css" href="css.css"> &

HTML5入门(CSS样式-------------------(CSS基础知识点----------------------------))

CSS继承性+层叠性+盒子+浮动 一.CSS继承性 eg:                 <style>                               div{                                      color: pink;                                      font-size: 30px;                                      width: 500px;      

CSS基础知识点(一)

CSS(Cascading Style Sheets)全称为:层叠样式表. 1.HTML元素类型 (1) 内联元素(inline):可以理解为“文本模式”,即从左到右顺序显示,不单独换行.常用的内联元素有:a, img, input, select, lable, span, textarea 等,和一些文本标记标签,如:small, big, strong, em, i, b(加粗), sub(下标), sup(上标), u(下划线)等. (2) 块级元素(block):单独一行,没有特殊定位

html+css基础知识点

以下是自己平时学习累计的,比较杂,欢迎大家指正和补充 一.css重置(css  reset) 这是我简单整理的,并不全,大家可以根据自己需要继续补充: body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}ol,ul{margin:0;padding:0;list-style:none;}a{text-decoration:none;}img{border:none;} 不用*{margin:0;padding:0:}是因为:div没有内

CSS基础知识点(二)

在这一篇中,主要总结一下CSS中的选择器. CSS中的选择器主要包括: 派生选择器:通过依据元素在其位置的上下文关系来定义样式.包括后代选择器,子元素选择器,相邻兄弟选择器. id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式. 类选择器:可以为class的 HTML 元素指定特定的样式. 属性选择器:为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性. (1) 选择器分组:可以将任意多个选择器分组在一起,中间以 ',' 隔开. 例:body, h2

CSS基础知识点

.

CSS基础语法和CSS经常用到的知识点总结

1. [代码]css基础教程     CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开.例如:下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素.在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值.h1 {color:red; font-size:14px;}//看见后面有分号,如果是一个属性或者这个属性在尾部可

软件测试必备-前端知识点之css基础及ps的用法

CSS 一. css定义 css样式表.层叠样式表,级联样式表 二. css基础语法 1. 写style标签,放在head标签里面的最后位置 2. 自己写的css代码,放在style标签里面 三. css常用属性 1.color: red;   设置文字颜色 2.font-size: 50px; 设置文字大小 3.font-family: "黑体"; 设置字体(如果设置的是中文字体,要加双引号!) 4.width: 100px;  设置宽度 5.height: 100px;  设置高度

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开