Css 基础知识(一)

1、Css概念

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表),Css是用来美化html标签的,相当于页面化妆。

◆样式表书写位置

2、 选择器

2.1、写法

选择器是选择谁(标签)的过程

  选择器{属性:值; 属性:值;}

 


属性


解释


Width:20px;


宽  (px:像素)


Height:20px;


Background-color:red;


背景颜色


font-size:24px;


文字大小


text-align:left | center| right


内容的水平对齐方式


text-indent:2em;


首行缩进(em文字)


Color:red;


文字颜色

2.2、选择器的分类

基础选择器:标签选择器、类选择器、ID选择器                                                            
 复合选中器:交集选择器、后代选择器、子代选择器、并集选择器

2.2.1 基础选择器

◆标签选择器

  标签{属性:值;}

特点:标签选择器定义之后,会将页面所有的元素都执行这个标签样式。

★颜色的显示方式

◎直接写颜色的名称

◎十六进制显示颜色 0—9 a—f

#000000; 前2位代表红色(R),中间2位代表绿色(G),后边2位代表蓝色(B)。PS:值越接近0颜色越深,相同值时写3个即可 #eeeeee =#eee

◎rgb      color: rgb(140,49,50);

◎rgba     color: rgb(140,49,238);    

a代表alpha 不透明度值 0-1       PS:0为不透明  1为100%透明   0.5 半透明

◆类选择器(重点)

  类选择器,是对HTML标签中class属性进行选择。CSS类选择器的选择符是 “.“ 类选择器在css样式编码中是最常用到的

  写法   .自定义类名{属性:值;  属性:值;}

特点: 谁调用,谁生效。

一个标签可以调用多个类选择器。

   多个标签可以调用同一个类选择器。

★类选择器命名规则

  不能用纯数字或者数字开头来定义类名;

  不能使用特殊符号或者特殊符号开头(_除外)来定义类名;

  不建议使用汉字来定义类名;

  不推荐使用属性或者属性的值来定义类名;

页面布局常见命名规范

◆ID选择器

  ID选择器和类选择器用法一样,区别是同一个HTML页面中不能有相同的ID名称(使用多个相同的ID选择器,浏览器不会报错但是不符合W3C标准了,JS调用会出问题,所以ID选择器命名必须要唯一性)

写法    #自定义名称{属性:值;}

特点:   一个ID选择器在一个页面只能调用一次。

    一个标签只能调用一个ID选择器。

    一个标签可以同时调用类选择器和ID选择器

◆通配符选择器

通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

  *{属性:值;}

特点:给所有的标签都使用相同的样式。

★不推荐使用,增加浏览器和服务器负担。

2.2.2 复合选择器

概念:两个或者两个以上的基础选择器通过不同的方式连接在一起

◆交集选择器(标签指定式选择器(即....又....))

    标签+类(ID)选择器{属性:值;}

特点:即要满足使用了某个标签,还要满足使用了类(id)选择器。

◆后代选择器(重点)

  后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。

(后代选择器首选要满足包含(嵌套)关系。父集元素在前边,子集元素在后边。)

    选择器+空格+选择器{属性:值;}

特点:无限制隔代。

只要能代表标签,标签、类选择器、ID选择器自由组合。

◆子代选择器

  选择器>选择器{属性:值;}

选中直接下一代元素

◆并集选择器

  并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。

  如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

  选择器+,+选择器+,选择器{属性:值;}

空格(嵌套关系)

“,” (并列关系)

“.”(同等关系)

3、文本元素

3.1    属性

  font-size:16px;  文字大小

  Font-weight: 700 ;   值从100-900,文字粗细,不推荐使用font-weight:bold;

  Font-family:微软雅黑;  文本的字体

  Font-style: normal | italic;      normal 默认值  italic  斜体

  ine-height: 行高

3.2 文本属性连写

font: font-style font-weight  font-size/line-height  font-family;

◆:注意:font:后边写属性的值,一定按照书写顺序。 文本属性连写文字大小字体为必写项。

  Font:italic 700 16px/40px  微软雅黑;

3.3 文字的表达方式

◆直接写中文名称。

◆写字体的英文名称。

◆unicode 编码


                     

时间: 2024-10-06 22:54:06

Css 基础知识(一)的相关文章

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

(转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教

XHTML CSS基础知识

学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教程的目的. 本教程多以实例形式循序渐进讲解,实例涉及到哪些关键点或难点就讲解什么,较少讲解概念.因为概念这些东西很难说明白,或者说明白你也不一定

java学习篇之---css基础知识(一)

css基础知识(一) 1.css样式: 加载css样式有以下四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css" rel="stylesheet" type="text/css" /> 这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接.它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式. <style> h2 {

CSS基础知识梳理

CSS基础知识: 1.CSS层叠样式表(Cascading Style Sheets):解决内容与表现分离的问题. 2. 层叠次序: (1)浏览器缺省设置: (2)外部样式表: (3)内部样式表(位于 <head> 标签内部): (4)内联样式(在 HTML 元素内部): 即,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值). 3.CSS语法:CSS 规则由

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

html和css基础知识

一,html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等.2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现.3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下

[HTML &amp; CSS] HTML和CSS基础知识

最近将博客简单地修饰了下,需要用到HTML和CSS代码,花了一天时间学习了一下这两方面的知识.虽然内容很简单,但是足够用来修改自己的博客了. 1. HTML 1.1. HTML介绍 HTML与CSS的关系 HTML 网页内容的载体,内容包含文字.图片.视频等. CSS 网页的样式,即表现,包含标题字体.颜色.边框等. JavaScript 实现网页上的特效效果. HTML文件的基本结构 <html> <head>…</head> <body>…</bo