CSS 基础语法

=================================
1、CSS概述
2、CSS语法
3、尺寸与边框
=================================
1、CSS概述
1、问题
1、设置页面中所有的文本颜色为红色
2、页面中所有的div里面的文本的颜色变为 蓝色
3、页面中所有的div里面的文本的颜色变为 绿色
## HTML元素属性的弊端:
1、想完成相同效果,却要使用不同属性
2、HTML元素改变的样式可重用性不高
2、CSS
CSS:Cascading Style Sheets
层叠样式表,级联样式表,样式表
特点:
1、实现了网页内容与表现相分离
2、提高了代码的可重用性和可维护性
3、CSS与HTML之间的关系
1、HTML用于构建网页的结构
2、css负责构建HTML页面元素的样式
4、HTML属性和CSS样式的使用原则
W3C建议 尽量使用CSS样式取代HTML属性
1、修改文本的颜色
推荐使用css的color属性
2、修改元素的背景颜色
推荐使用css的background-color属性
如果是HTML元素所特有的属性的话,只能使用HTML元素属性
td元素属性colspan
5、使用CSS样式表的方式(重点)
1、内联方式
作用:将样式定义在单个的HTML元素中
语法:
<ANY style="样式声明1;样式声明2"></ANY>
样式声明语法:
样式属性:属性值
eg:
1、文本颜色的样式属性
color:red;
2、背景颜色的样式属性
background-color:green;
3、文本大小的样式属性
font-size:24px;
练习:设置页面上的 某个 div 元素中的 样式 , 文本颜色为 黄色(yellow),背景颜色为黑色(black),字体大小为48像素
2、内部样式表
1、特点
应用范围为整个页面而不是某一个别元素,能够提升可重用性和可维护性,同时体现内容与表现相分离
2、语法
1、在 <head>元素中 增加 <style></style>标记用来声明样式
2、在 <style></style>元素中 编写若干 “样式规则”
样式规则语法规范:
1、选择器
作用:规范了页面中哪些元素能够使用声明好的样式
eg:
元素选择器
p div span
2、若干样式声明
属性:值;属性:值;
选择器{若干样式声明}
练习:使用内部样式表,控制页面中所有的p标记,文本颜色为yellow色,背景颜色为black色,文字大小为 24px
3、外部样式表
1、作用
以独立的css样式表文件保存样式规则,可以应用在各个页面中
2、使用步骤
1、创建单独的样式表文件(*.css)
在该文件中可以编写若干样式规则
2、在需要使用该样式表文件的页面上,引入样式表文件
在页面的<head>元素中添加以下代码:
<link rel="stylesheet" href="样式表文件url">
4、基本排错
1、Styles 中提示 "Unknown property name"
说明 样式属性名称 写错了
2、Styles 中提示 "Invalid property value"
说明 样式属性值 写错了
2、CSS语法
1、CSS样式表特征
1、继承性
大多数CSS属性是可以被继承的
2、层叠性
可以为一个元素定义多个样式规则
多个样式规则中,如果样式声明不重复的话,那么则可以层叠为一个样式规则
3、优先级
样式定义冲突(重复)时,会按照不同样式的优先级来应用样式
低:浏览器缺省设置(User Agent)
中:外部样式表或内部样式表
就近原则
高:内联样式
注意:继承的样式和自定义样式冲突时,永远都是以自定义的为主
4、!important 规则
显示调整样式属性的优先级
只要 !important 出现,永远都以!important 的为主
语法:
选择器{属性:属性值 !important;}
注意:尽量少用
2、CSS基础选择器(重难点)
1、作用
规范了页面中哪些元素能够使用定义好的样式
同时也帮助我们去匹配页面上的元素
2、选择器
1、通用选择器(了解)
1、作用
匹配页面上所有的元素
2、语法
*{样式声明;}
3、注意
效率低,尽量不用
尽可能通过 继承性 去代替通用选择器的效果
2、元素选择器
又名:标签选择器,标记选择器
1、作用
匹配页面某一指定元素
比如:
页面所有的 div 元素
页面所有的 p 元素
2、语法
元素{}
ex:
h1{color:red;}
h2{color:blue;}
3、类选择器(重点)
1、作用
允许元素使用附带的class属性值,对选择器进行引用
2、语法
以 . 作为开始
.类名{}
类名:字母,数字,_,-组成,不能以数字开始
引用类选择器:通过元素的 class 属性,进行引用
<ANY class="类名"></ANY>
3、特殊用法-分类选择器
设置class值为redColor的p元素的 背景颜色为 Yellow
1、作用
将 元素选择器和类选择器结合到一起,从而实现对某种元素的不同样式的细分控制
2、语法
元素选择器.类选择器{
样式声明;
}
p.redColor{
background-color:yellow;
}
4、特殊引用-多类选择器
1、作用
可以让一个元素同时引用多个类选择器,中间用空格分开即可
4、id选择器(重点)
1、作用
只匹配指定ID值得元素
2、语法
#id值{}
5、群组选择器
1 、作用
选择器声明以逗号来隔开的选择器列表.其目的是为了声明一组选择器中的公共样式
2、语法
选择器1,选择器2,选择器3,..,{
}
ex:
设置页面上所有的p元素,span元素,id为d1元素,class为redColor的元素的文本颜色 为 红色
p,span,#d1,.redColor{
color:red;
}
等同于
p{color:red;}
span{color:red;}
#d1{color:red;}
.redColor{color:red;}
6、后代选择器
1 、作用
用于匹配某元素的后代元素时使用
2、语法
选择器1 选择器2{ }
7、子代选择器
1、作用
用于匹配某元素的子代元素 (只具备一级层级关系被嵌套的元素)
2、语法
选择器1>选择器2{
}
8、伪类选择器
1、作用
为了匹配元素不同的状态的
2、语法
:伪类选择器{}
3、分类
1、链接伪类
:link :匹配 超链接 未被访问时的状态
:visited :匹配 超链接 被访问过的状态
2、动态伪类
:hover :匹配鼠标悬停在 html 元素时的状态
:active : 匹配 html元素 被激活时的状态
:focus : 匹配html元素获取焦点时的状态(文本框与密码框)
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
3、尺寸与边框
1、CSS单位
1、尺寸单位
1、%
占据父元素尺寸的占比
2、in
英寸,1in=2.54cm
3、cm
厘米
4、mm
毫米
5、px
像素,计算机屏幕上的一个点
6、pt(point)
磅/点
1pt=1/72in
7、em
1em 相当于 当前字体尺寸
2em 相当于 当前字体尺寸的2倍
注意:css中描述尺寸的单位是不能省略的。
2、颜色单位
1、rgb(r,g,b)
r:red
g:green
b:blue
r,g,b的范围分别是 0~255
background-color:rgb(125,28,96);
2、rgb(r%,g%,b%)
3、#rrggbb
由6位16进制数字表示颜色
16进制范围:
0-9 A-F
#ff0000 : 红色
#123456 :
4、#rgb
#rrggbb的缩写
#001122 --》 #012
5、表示英文的单词
red,green,blue,yellow,
2、尺寸属性
1、作用
尺寸属性一般用于设置元素的宽度和高度
2、宽度
属性:
width
min-width
max-width
注意:min-width/max-width 与 width 属性相冲突,最终以width属性值为准
3、高度
属性:
height
min-height
max-height
4、注意
1、不是所有的元素都支持修改尺寸
支持修改尺寸属性的元素如下:
1、块级元素
2、非块级元素中,存在width,height属性的html元素
table,img
5、溢出
使用尺寸属性控制元素大小时,如果内容所需的空间大小大于元素本身的空间,会导致内容溢出
处理溢出的属性:
overflow:
overflow-x:横向溢出处理
overflow-y:纵向溢出处理
取值:
1、visibile
默认值,溢出可见
2、hidden
隐藏
3、scroll
让元素显示滚动条,溢出时可用
4、auto
自动,溢出时显示滚动条,并可用
3、边框
1、作用
在元素周围绘制一条线
2、属性
1、简写方式
border:width style color;
width:边框粗细,以px为单位
style:边框样式
solid : 实线
dotted : 虚线
dashed : 虚线
color:边框颜色
合法的颜色值
作用:控制元素的上下左右四个边框的粗细,样式,颜色
2、单边定义
border-方向:width style color;
方向:
top:上
bottom:下
left:左
right:右
3、单属性定义
border-属性:值;
属性:
width : 边框粗细
style : 边框样式
color : 边框颜色
作用:控制四条边的对应属性
4、单方向单属性定义
border-方向-属性:值;
5、注意
1、边框颜色可取值为 transparent,意味透明
2、取消边框显示
border:0;
border:none;
border-方向:0;
border-方向:none;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341