博客
关于我
CSS_简介、选择器、属性和属性值、盒子模型
阅读量:324 次
发布时间:2019-03-04

本文共 1784 字,大约阅读时间需要 5 分钟。

CSS(Cascading Style Sheets层叠样式表) 可以同时控制多重网页的样式和布局。

基础语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
格式:selector {declaration1; declaration2; … declarationN }

选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。

如果值是单词的话需要加上双引号
属性和值被冒号分开。不同的声明用分号隔开。

是否包含空格不会影响 CSS 在浏览器的工作效果,CSS 对大小写不敏感。

不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

选择器的分组

可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。h1,h2,h3{css属性}

css简介

css引入方式和书写规范(1)内嵌样式。在html标签中使用style属性引入css样式书写规范:都在双引号内。属性:属性值,多个属性之间使用分号。例:
(2)内部样式。在head标签中使用(3)外部样式。将css写在一个单独的css文件中,谁用谁调用书写规范:创建.css文件,将css样式写入;在head标签中使用link引入。rel:relation缩写,引入的这个文件与html本身的关系 样式表type="text/css":告知浏览器中这段代码需要css解析器进行解析href:需要引入的css路径例:在style.css文件中写div{color:red; font-size:30px;}

css选择器

1基本选择器(1)元素选择器语法:html标签{css属性}(2)id选择器(id具有唯一性)语法:#id的属性值{css属性}例:head里写 #div1{css属性}body里标签
(3)class选择器语法:.class属性值{css属性}head里写.div1{css属性}#mydiv{css属性}body里写
三个基本选择器可以同时使用基本选择器优先级:id > class > 元素选择器2属性选择器语法:在style中写 基本选择器[属性="属性值"]{css属性}3伪元素选择器a标签的伪元素选择器静止状态:a:link{css样式}悬浮状态:a:hover{css样式}活动状态:a:active{css样式}完成状态:a:visited{css样式}4层级选择器语法:父选择器 子选择器... #div1 .myd2 span{css样式}
div1下的myd1下的span文字
div1下的myd2下的span文字
div2下的myd1下的span文字
div2下的myd2下的span文字

css的属性和属性值

1、文字属性font-size:字号font-family:字体的类型2、文本属性color:颜色text-align:对齐方式text-decoration:下划线。  属性值:none、underline3、背景属性background-color:背景颜色background-image:背景图片。	属性值:url路径background-repeat:平铺方式(默认x和y方向都平铺)。							属性值repeat、no-repeat、repeat-x、repeat-y4、长度宽度属性widthheight5、列表属性list-style-type:列表项前的小标志list-style-image:列表项前的小图片。属性值:url路径6、显示属性display:是否让标签元素显示。属性:none、block、inline7、浮动元素float:浮动方向。属性值:left、right

css的盒子模型

border:盒子的边框padding:盒子内部的间隙margin:盒子外部与其它元素之间的间隙			
hello world

转载地址:http://apnh.baihongyu.com/

你可能感兴趣的文章
Oracle 11G环境配置
查看>>
【Python】(十二)IO 文件处理
查看>>
【Oozie】(三)Oozie 使用实战教学,带你快速上手!
查看>>
师兄面试遇到这条 SQL 数据分析题,差点含泪而归!
查看>>
C语言的数值溢出问题(上)
查看>>
8051单片机(STC89C52)以定时器中断模式实现两倒计时器异步计时
查看>>
vue项目通过vue.config.js配置文件进行proxy反向代理跨域
查看>>
android:使用audiotrack 类播放wav文件
查看>>
聊聊我的五一小假期
查看>>
数据库三个级别封锁协议
查看>>
ACM/NCPC2016 C Card Hand Sorting(upc 3028)
查看>>
Java求逆波兰表达式的结果(栈)
查看>>
ubuntu学习笔记-常用文件、命令以及作用(hosts、vim、ssh)
查看>>
SLAM学习笔记-求解视觉SLAM问题
查看>>
普歌-允异团队-HashMap面试题
查看>>
还在一个一个手动安装虚拟机吗?Cobbler自动部署装机一键最小化安装打把游戏就好了
查看>>
程序员应该知道的97件事
查看>>
create-react-app路由的实现原理
查看>>
Linux环境变量配置错误导致命令不能使用(杂谈)
查看>>
openstack安装(九)网络服务的安装--控制节点
查看>>