02---CSS整理

一、概述

CSS(cascading style sheet) 层叠样式表

提供比HTML更强大的页面排版、美化工具

CSS将网页内容和显示样式进行分离,提高了显示功能

二、CSS与HTML的结合方式

1、style属性方式(行内样式):灵活但麻烦,只适合局部修改

2、style标签方式(内嵌样式):将css样式内嵌到html页面的head里面

优点:统一管理,统一修改,比较方便。

                                  

3、导入方式:

                <style  type="text/css">

@import url(abc.css); 
                </style>

4、连接方式:

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

优先级: 就近原则

    代码规范: 选择器名{属性名:属性值;……},多属性值用空格分开

三、CSS选择器

1、HTML标签名选择器: 使用的就是html的标签名

font {background-color:#FFFF00; color:#FF0000; }

2、class选择器: 使用标签的class属性

.p2 {font-size:1cm}

3、id选择器: 使用的是标签的id属性

#id1{ font-size:4cm}

四、扩展选择器

4、关联选择器:(上下文选择器),用于在一个标签内嵌套另一个标签的样式

p font{ font-size:1cm   }

5、组合选择器: 多个不同标签样式相同

p,font{background-color:#FF0000; color:#FFFF00;}

6、伪元素选择器: html预先定义好的选择器

a:link{ color:red}

a:visited{color:blue}
                   a:hover{color:black}
                   a:active{color:yellow}

五、常见操作(属性、值   参考帮助手册)

1、字体设置: font、color、font-size、font-family ……

2、文本设置: text-intent、text-align ……

3、背景设置: background、background-color、background-position ……

4、列表设置: list-style ……

5、盒子模型: border、 margin、padding

                

6、定位设置: position、float、clear、z-index

                相对定位:相对于自己本来的位置

                绝对定位:相对应父控件的位置

7、鼠标样式设置:cursor

8、……

时间: 2024-10-25 12:37:45

02---CSS整理的相关文章

CSS学习笔记02 CSS选择器

1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选择器 标签选择器就是选择当前页面中相同名字的标签 /*设置所有p标签的文字颜色为红色*/ p { color: red; } 3.ID选择器 id选择器使用"#"进行标识,后面紧跟id名 /*设置id为title的标签的文字颜色为红色*/#title { color: red; } <

前端必会css整理

1.设置css样式的三种方式? 外部样式表,引入一个外部css文件 内部样式表,将css代码放在<head>标签内部 内联样式,将css样式直接定义在html元素内部 2.css有哪些选择器? id选择器 类选择器 标签选择器 又可以细分为: 派生选择器(包括后代选择器.子元素选择器.相邻兄弟选择器) 伪元素选择器 属性选择器 群组选择器 通配符选择器 css优先级定义? 一般而言,选择器越特殊指向越准确,优先级越高: 计算方法: 标签选择器优先级为1 类选择器优先级为10 id选择器优先级为

一些常用的html css整理--文本长度截取

div+css设置列表div超出部分显示...(单行文本) width:200px; //指定宽度: overflow:hidden; //将超出内容隐藏 text-overflow:ellipsis; //文本溢出时显示省略标记. white-space:nowrap; //强制内容不换行.强制在同一行内显示所有文本,直到文本结束或者遭遇 br 元素 现在的浏览器都支持text-overflow:ellipsis属性,用来实现单行文本的溢出显示省略号,但是这个属性并不支持多行文本. 多行文本处

高效 css 整理

避免通用规则 请确保规则不以通用类型作为结束! 不要用标签名或 classes 来限制 ID 规则 如果规则的关键选择器为 ID 选择器,则没有必要为规则增加标签名.因为 ID 是唯一的,增加标签只会拖慢匹配过程. 差 button#backButton {…} 差 .menu-left#newMenuIcon {…} 好 #backButton {…} 好 #newMenuIcon {…} 例外:When it’s desirable to change the class of an ele

前端HTML 与css 整理(未完)

HTML 中的标签存放于文本文件中 需要按照以下固定的文档结构组织:<!DOCTYPE HTML><html> <head>头部相关信息 </head> <body> 页面主体相关内容 </body></html> 标签解释:#1.<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档. #2.<html></h

前端基础02 CSS

CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style="color: red">Hello world.</p> 内部样式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <meta charset="UTF-8"> <

css整理

font-size:12px; line-height:22px; font-family:Arial,Helvetica,sans-serif; /*优化*/ font:12px/22px Arial,Helvetica,sans-serif; background-color:#eee; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; backgro

02 CSS选择符

原文地址:https://www.cnblogs.com/springsnow/p/9461766.html

整理推荐的CSS属性书写顺序

一. Mozilla 建议CSS规则 <span style="font-family:Microsoft YaHei;">/* Suggested order:    * display    * list-style    * position    * float    * clear    * width    * height    * margin    * padding    * border    * background    * color    * 

整理 W3CSchool 常用的CSS属性列表

近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O. 摘选自:http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版本. 目录: 01. CSS背景属性(Background) 02. CSS边框属性(Border和Outline) 03. CSS文本属性(Text) 04. CSS字体属性(Font) 05. CSS外边距属性(Margin) 06. CSS内边距属性(Padding) 07. CSS列表属性(