php学习之css小结1

css:”cascading style sheets”的缩写,层叠样式表,作用:给html标记加样式。

css语法规则:

由“选择器”和“声明”组成

  • 选择器:html标记、class、id、通配符、复合、伪类
  • 声明:由大括号括起来,每个声明用“;”结束,声明由属性和值组成,如:div{color:red;}

引用方式:如何让html和css连接

  1. 内嵌式:当做html的标记来使用,写入到head中。如:<style type=”text/css”>具体的样式</style>
  2. 行内样式:当做html标记的属性来使用,不需要选择器和大括号。如:<h1 style=”color:red;”></h1>
  3. 外链式:把css样式写入到一个css文件中,用link标记引入css文件。比如:<link rel=”stylesheet” type=”text/css” href=”./xxx.css”>
  4. @impost:可以在css文件中再次引入另一个css文件。如:@impost url(./xxx.css);

选择器:

  1. 标准选择器:class(给标记加calss属性)、id(给标记加id属性)、标记、通配符(*)
  2. 复合选择器:多元素(把多个元素用逗号隔开)、后代(找当前标记中嵌套进来的标记—–没有代的限制)、子类(有代的限制,只能有一代)
  3. 伪类:一般都是加在超链接的样式,只有超链接有4种状态
    • 默认:link
    • 放上:hover
    • 点击:active
    • 访问后:visited

基本属性:

  • 字体:font-size(大小)、font-family(什么字体)、font-style(斜体,值为italic)、font-weight(bold加粗)
  • 文本:color(颜色)、text-align(文本水平对齐方式left,center,rgiht)、text-indent(首行缩进)、text-decoration(文本修饰符underline(上)、overline(下划线)、line-through(删除线)、none(无))、line-height(和高设置成一样,目的是文本上下剧中)
  • 尺寸:width、height
  • 背景:background-color(颜色)、background-image(图片)、background-position(定位,九宫格,像素,百分比)、background-repeat(平铺方式:no-repeat、repeat-x、repeat-y)background-attachment(固定fixed)
  • 背景简写:background:颜色 图片 平铺方式 定位 固定。如:background:#ccc url(./xxx.jpg) no-regeat left top fixed;
  • 列表:list-style-type:none、list-style-image:url、list-style-position:inside/outside(在内或在外)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

CSS布局之垂直居中一

CSS中的水平居中是非常容易实现的,比如对于行内元素,将它的父级元素设置text-align为center既可。 ? 对于块级元素,设置它的margin:aut...

20470
来自专栏DeveWork

解决Chrome或其它WebKit浏览器input和textarea的黄色/蓝色边框问题

之前在折腾主题的时候发现一个很怪的现象,在Chrome浏览器下,输入框有一个黄色的边框;而在其它WebKit浏览器(如Jeff使用的傲游浏览器)下,输入框的颜色...

30660
来自专栏数据结构与算法

08:石头剪刀布

08:石头剪刀布 总时间限制: 1000ms 内存限制: 65536kB描述 石头剪刀布是常见的猜拳游戏。石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,...

46570
来自专栏用户画像

一个简单的卡动车排队系统

7320
来自专栏十月梦想

jquery高级选择器第一部分

        上一篇简单的介绍了jquery的基础选择器,准备把高级选择器部分分为三篇博文介绍!慢工出细活吗,循序渐进相信jq会和css一样顺手,废话不少了接...

6920
来自专栏静默虚空的博客

HTML 简介

HTML 简介 超文本标记语言  (Hypertext Markup Language, HTML)  是一个可以用来结构化你的Web内容并给予其含义和目标的...

22690
来自专栏自动化测试实战

HTML第三课——css盒子【2】

299140
来自专栏企鹅号快讯

css层叠样式表

CSS概述 CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表 主要作用 为了让网页元素的样式更加...

420110
来自专栏Java帮帮-微信公众号-技术文章全总结

03.HTML头部/CSS/图像/表格/列表

03.HTML头部/CSS/图像/表格/列表 HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义...

1.2K90
来自专栏前端萌媛的成长之路

position有几种,absolute和relative的区别

17420

扫码关注云+社区

领取腾讯云代金券