您的位置：360文档中心› H5之Css基础(1)基础语法与选择器;

H5之Css基础(1)基础语法与选择器;

H5之Css基础(1)基础语法与选择器;
H5之Css基础(1)基础语法与选择器;

Css层叠样式表；

多个属性通过分号隔开，多个选择器用逗号隔开进行分组；

h1,h2,h3{?color: blue;?font-size: 50px;?}

选择器分组h1,h2,h3

选择器继承:子标签如果没有设置样式，它会继承父标签的样式,h1,h1有自己的样式，而a,p继承了body的样式；

?

hahh

?

ggg

哈安徽?

hello

?

====================================

h1,h2{?color: blue;?font-size: 50px;?} body{?color:red ;?}

派生选择器：li strong，strong为派生选择器；

?

标签hello css

?
    ?
  • li标签

    • ?
?

===================================

li strong{?color: red;?}?strong?{?color: blue;?}

id选择器：#(div 使用id选择器较多)

?

标签hello css

?

============================

#pid {?color: red;?}

派生选择器和ID选择器一起使用

?

标签hello css百度

?

==================================

#pid a {?color: red;?}

a标签中字体颜色发生变化，p标签颜色不发生变化

#pid {?color: red;?}

p标签颜色发生变化，a标签颜色不发生变化，

类选择器：.表示和ID选择器非常相像的，类选择器也可以作为派生选择器；div中使用更多；

标签hello css百度

?.pclass a{?color: red;?}

a标签中字体颜色发生变化，p标签颜色不发生变化

.pclass {?color: red;?}?p标签颜色发生变化，a标签颜色不发生变化，

1属性选择器2属性和值选择器；

????

Title????

属性选择器

?

属性和值选择器

??

Css复习题

1、关于内容、结构和表现说法正确的是（ABD ） A、内容是页面传达信息的基础 B、表现使得内容的传达变得更加明晰和方便 C、结构就是对内容的交互及操作效果 D、内容就是网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。 2、关于XHTML基本语法说法正确的是（ABC ） A、在文档开始要定义文档类型 B、在根元素中应声明命名空间 C、所有标签需闭合的，空标签要加“ /”来关闭 D、注释语句为：/**/ 3、关于CSS基本语法说法正确的是（ AC ） A、属性必须要包含在{}号之中 B、属性和属性值之间用等号链接 C、当有多个属性时，用“；”进行区分 D、如果一个属性有几个值，则每个属性值之间用分号分隔开 4、以下声明可将文本大小设为12px的有：（ABC） A、font-size:12px; B、font-size:9pt; C、font-size:0.75em; D、font-size:0.75; 5、关于样式表的优先级说法正确的是：（ABC ） A、直接定义在标记上的css样式级别最高 B、内部样式表次之 C、外部样式表级别最低 D、当样式中属性重复时，先设的属性起作用 6、关于浏览器默认样式说法错误的是：（ABCD ） A、IE默认页边距为10px，通过body的margin属性设置。 B、FF默认页边距为8px,通过body的padding属性设置。

C、IE默认列表左缩进为40px，通过ul、ol的margin属性设置。 D、FF默认列表左缩进为40px，通过ul、ol的padding属性设置。 7、关于CSS为什么会出现Bug说法正确的是：（ABC） A、CSS作为表现标准语言，需要在不同浏览器中实现表现层统一 B、各大主流浏览器由于不同厂家开发，所有的核心构架和代码也很难重和 C、各大厂商处于自身利益而设种种技术壁垒 D、网页设计师定义的命名空间不一样 8、CSS样式文件的类型有（ ABC ） A、内部样式表 B、内联样式表 C、外部样式表 D、包含样式表 9、以下哪些Bug在FF中不会出现（ ABCD ） A、双补浮向Bug B、图片间隙 Bug C、项目符号隐藏 Bug D、多余字符Bug 10、DIV/CSS布局模型包括（ ABC ） A、Flow Model（流动模型） B、Float Model（浮动模型） C、Layer Model （层模型） D、box Model (盒模型) 11、关于CSS基本语法说法正确的是（ AC ） A、属性必须要包含在{}号之中 B、属性和属性值之间用等于号链接 C、当有多个属性时，用“；”进行区分

CSS初级教程

介绍 级联样式表（Cascading Style Sheets，CSS）是一种为网站添加布局效果的出色工具。它可以省去你大量时间，令你可以采用一种全新的方式来设计网站。CSS 是每个网页设计人员所必须掌握的。 本CSS教程能够让你在数小时内入门CSS。它很容易理解，而且将向你介绍所有高级技巧。 学习CSS是很有趣的。你在学习本教程的过程中，记得留有充分的时间来实践你在每一课中学到的知识。 使用CSS要求你有基本的HTML经验。如果你不熟悉HTML，那么请在开始学习CSS 之前先学习我们提供的HTML教程。 我需要什么软件？ 在学习本教程时，请不要使用类似FrontPage、DreamWeaver或Word这样的软件。这些高级软件对你学习CSS没有帮助。相反，它们会限制你，并显著减慢你的学习进度。 你所需要的只是一个免费的简易文本编辑器。 例如，微软视窗操作系统（Microsoft Windows）自带的记事本（Notepad）程序。你可以依次点击“开始菜单→程序→附件”找到该程序。如果你用的是其他操作系统，那么也有类似的简易文本编辑器可用，比如Linux上的Pico或Mac（苹果机）上的Simple Text。 采用简易文本编辑器来学习编写HTML和CSS是非常好的，因为它不会影响或修改你所输入的代码。这样，代码的对错完全取决于你自己，而不是软件。 你可以使用任何浏览器。但我们建议你把浏览器升级至最新版本。 你所需要的全部软件就是一个浏览器和一个简易文本编辑器。 我们现在开始学习CSS吧！ 第1课：CSS是什么？ 也许你曾听说过CSS，但并不真正清楚CSS到底是什么。在这一课，你将学到更多CSS的知识，并了解CSS可以做些什么。 CSS是C ascading S tyle S heets（级联样式表）的缩写。

CSS选择器笔记

CSS选择器笔记 阮一峰整理 参考网址：456 Berea Street 一、基本选择器 实例： * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } https://www.360docs.net/doc/c54811398.html, { background:#ff0; } https://www.360docs.net/doc/c54811398.html,.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器

实例： div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 实例： p[title] { color:#f00; } div[class=error] { color:#f00; }

td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 实例： p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、 CSS 2.1中的伪元素

CSS语法

CSS 语法 CSS 实例 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 CSS 实例 CSS声明总是以分号(;)结束，声明组以大括号({})括起来: p {color:red;text-align:center;} 为了让CSS可读性更强，你可以每行只描述一个属性: 实例 p { color:red; text-align:center; } CSS 颜色值的写法 在描述颜色的时候，除了使用英文单词red，我们还可以使用十六进制的颜色值 #ff0000： p { color: #ff0000; } 为了节约字节，我们可以使用CSS 的缩写形式： p { color: #f00; } 我们还可以通过两种方法使用RGB 值： p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } 提示：当使用RGB 百分比时，即使当值为0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为0 像素时，0 之后不需要使用px 单位。 在本站的编程实战部分中，介绍了CSS使用十六进制代码设置颜色，以及CSS使用rgb 属性设置颜色，你可以参考该部分的内容进行更多了解。 CSS 注释 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。 CSS注释以"/*" 开始, 以"*/" 结束, 实例如下: /*这是个注释*/ p {

CSS复习题

1、关于内容、结构和表现说法正确的是（ABD） A、内容是页面传达信息的基础 B、表现使得内容的传达变得更加明晰和方便 C、结构就是对内容的交互及操作效果 D、内容就是网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。 2、关于XHTML基本语法说法正确的是（ABC） A、在文档开始要定义文档类型 B、在根元素中应声明命名空间 C、所有标签需闭合的，空标签要加“/”来关闭 D、注释语句为：/**/ 3、关于CSS基本语法说法正确的是（AC） A、属性必须要包含在{}号之中 B、属性和属性值之间用等号链接 C、当有多个属性时，用“；”进行区分 D、如果一个属性有几个值，则每个属性值之间用分号分隔开 4、以下声明可将文本大小设为12px的有：（ABC） A、font-size:12px; B、font-size:9pt; C、font-size:0.75em; D、font-size:0.75; 5、关于样式表的优先级说法正确的是：（ABC） A、直接定义在标记上的css样式级别最高 B、内部样式表次之 C、外部样式表级别最低 D、当样式中属性重复时，先设的属性起作用 6、关于浏览器默认样式说法错误的是：（ABCD） A、IE默认页边距为10px，通过body的margin属性设置。 B、FF默认页边距为8px,通过body的padding属性设置。

C、IE默认列表左缩进为40px，通过ul、ol的margin属性设置。 D、FF默认列表左缩进为40px，通过ul、ol的padding属性设置。 7、关于CSS为什么会出现Bug说法正确的是：（ABC） A、CSS作为表现标准语言，需要在不同浏览器中实现表现层统一 B、各大主流浏览器由于不同厂家开发，所有的核心构架和代码也很难重和 C、各大厂商处于自身利益而设种种技术壁垒 D、网页设计师定义的命名空间不一样 8、CSS样式文件的类型有（ABC） A、内部样式表 B、内联样式表 C、外部样式表 D、包含样式表 9、以下哪些Bug在FF中不会出现（ABCD） A、双补浮向Bug B、图片间隙Bug C、项目符号隐藏Bug D、多余字符Bug 10、DIV/CSS布局模型包括（ABC） A、Flow Model（流动模型） B、Float Model（浮动模型） C、Layer Model（层模型） D、box Model(盒模型) 11、关于CSS基本语法说法正确的是（AC） A、属性必须要包含在{}号之中 B、属性和属性值之间用等于号链接 C、当有多个属性时，用“；”进行区分

Html+css基础教程

H t m l+c s s基础教程 (适合新手) 在这里我把h t m l和c s s放在一起了，适合新手和在学习的人当成笔记用。希望对大家有所帮助。 HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。 一、HTML的组成结构 HTML分为单标识语句和双标识语句。 <标识>内容如：
<标识>内容 如：搜狐 标识中存在标识属性用来定义各标识属性的值。 中心内容 二、HTML全局结构 1、头部。（标题栏）只要你学过英语，你应该知道头怎么用英文写吧！yes，HEAD就是了；所以，头部的HTML写法就是头部的内容，简单不，大家注意一下，这两个非常相似，只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。 2、眼睛。（标题内容）就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面的标题了，标题怎么说呢？title,yes！大家知道眼睛是长在头上的，所以啦:标题这些应放在和之间。也就是 标题 3、身体。（主体）身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所看到的页面页就是他的身体部分了（当然它的TITLE可以在浏览器的最左上角可以看到），身体----BODY，他的写法也就是：页面内容 最后，别忘了把这些部分组成一体----网页，所以咱们就用把他们给包起来。 咱们来大体看看网页的结构： 标题 页面内容 在进入主体内容标识讲解之前我想给大家介绍下标识中的常用属性，如： 1、内容 leftMargin、topMargin表示：设置页面离外框的左边距和上边距的距离为像素值，默认为1。marginwidth、 marginheight表示：设置页面文字同页面边缘的间距为像素值，默认为1。 注marginwidth、 marginheight还可以用于表格、框架等中。

CSS选择器

CSS选择器 1.常用选择器 常用的选择器有类型选择器和后代选择器。 1.1类型选择器 类型选择器用来选择特定类型的元素。可以根据三种类型来选择。 1）ID选择器，根据元素ID来选择元素。 前面以”#”号来标志，在样式里面可以这样定义： #demoDiv{ color:#FF0000; } 这里代表id为demoDiv的元素的设置它的字体颜色为红色。 我们在页面上定义一个元素把它的ID定义为demoDiv，如：

这个区域字体颜色为红色
用浏览器浏览，我们可以看到因为区域内的颜色变成了红色 再定义一个区域
这个区域没有定义颜色
用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。 2）类选择器根据类名来选择 前面以”.”来标志，如： .demoDiv{ color:#FF0000; } 在HTML中，元素可以定义一个class的属性。 如：
这个区域字体颜色为红色
同时，我们可以再定义一个元素：

这个段落字体颜色为红色

最后，用浏览器浏览，我们可以发现所有class为demo的元素都应用了这个样式。包括了页面中的div元素和p元素。 上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那个一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。 我们可以改成这样来定义。

这个区域字体颜色为红色
同时，我们可以再定义一个元素： 这个段落字体颜色为红色
这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。 3）标签选择器根据标签选择 用标签选择指根据标签名来应用样式，定义时，直接用标签名。如： div{ color:#FF0000; } 我们再定义一个元素。
这个区域字体颜色为红色
这个区域字体颜色也为红色
用浏览器浏览，我们发现两个DIV元素都被应用了样式，这里不用定义id，也无需要定义class属性。 示例参见：根据标签来选择元素.html 这种选择方式非常的有用，比如你觉得锚链接的下划线不太美观，想把所有的锚链接的样式都设成无下划线形式，颜色为鲜艳的蓝色。可以这样定义。 a{ text-decoration:none; color:#00CCCC; } 1.2 后代选择器 后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两个常用选择器，中间加一个空格表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中。

CSS指层叠样式表(CascadingStyleSheets)

CSS指层叠样式表（Cascading Style Sheets） CSS语法由三部分组成：选择器、属性和值： Selector {property: value}例： body {color:blue;} 若值为若干单词，需加引号。 选择器分组例： h1,h2,h3,h4 {color:#ff0000;} 使这几个标题的颜色都是绿色的。 派生选择器例： li strong { font-style:italic; } 指在li里的属性为strong的元素会变成斜体。 id选择器以#定义 #red {color:red;}

aaaaa 注：类选择器的第一个字符不能是数字。 td.fancy { color: #f60; background: #666; } 作为派生选择器，指类名为fancy的表格单元都是灰色背景的橙色。 如何插入样式表3种方法 ①外部样式表 注：外部样式表mystyle.css不包含任何html标签。 ②内部样式表

DIV+CSS基础教程全攻略

CSS教程基础 一、CSS 高度_css height DIV CSS高度基础知识 这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX，em等常用使用PX（像素）为单位。 实例： .yangshi{height:300px;}即设置了yangshi选择器对象高度为300px。 CSS高度单词：height CSS 最大高度：max-height (IE7及以上版本浏览器支持) CSS 最小高度：min-height (IE7及以上版本浏览器支持) CSS上下居中：line-height 以上可跟值为数字加单位。 Html初始高度与DIV+CSS高度对照 以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素） 为单位。 实例：

我的高度为100px
我高度为50px

分别设置了高度为100px和50px的两行表格 接下来我们讲解CSS 高度使用方法及技巧 1、CSS自适应高度 一般我们需要让宽度一定时高度随内容增加而增高。此时我们将无需设置高度即可实现此效果。同时也无需使用height:auto来实现高度自适应。通常默认情况下不设置高度，对象高度即是自适应高度。 2、固定高度及隐藏超出固定高度的内容 很多时候我需要设置对象固定高度同时让多余的内容不显示出来。 解决办法：设置固定高度值，和设置内容不被溢出（隐藏超出内容） 如设置一个高度为50px；宽度为50px，并禁止内容超出此高度宽度，为了观看效果同时设置对象为1px黑色边框演示， CSS 代码： .yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;} Html body内代码：

https://www.360docs.net/doc/c54811398.html,演示，内容 测试内容高度超出演示实例，divcss5实例

CSS选择器的声明与嵌套

CSS选择器的声明与嵌套 使用CSS选择器控制HTML标记的时候，每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个。 并且，任何形式的选择器，都是合法的，标记选择器，class选择器和ID选择器都可以集体声明。 集体声明 在声明CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以使用集体声明的方式，将风格相同的选择器同时声明。 [html]view plain copy print? 1. 2. 3. 4.集体声明 5. 6.

17. 18. 19. 20.

集体声明h1

21.集体声明h2 22.

集体声明h3

23.

集体声明h4

24.
集体声明h5
25.集体声明p1 26.

集体声明p2 27.

集体声明p3 28. 29. 30. 全局声明 对于实际网站中，如果希望页面中所有的标记都使用同一种CSS样式，但是，又不希望逐个来集体声明，这是可以使用全局声明符号*来声明。 [html]view plain copy print? 1. 2. 3. 4.集体声明 5. 6. 标记内定义。 例如： ? ? ? ? ? ? ?

CSS层叠样式表 ? 2 CSS的使用 ?一个样式表由样式规则组成，以告诉浏览器怎样呈现一个文档。 2.1 CSS基本语法 ?CSS 语法结构由2 部分组成：选择器和声明。其中声明由样式属性和取值构成。 ?语法： 选择符{ 样式属性: 取值; 样式属性: 取值；……} ?例如： H1{color:blue; font-family: 隶书; } ?选择符：指这组样式编码所要针对的对象，可以是一个HTML标签，如body、h1；也可以是定义了特定的id或class的标签，如#main 表示选择指定了id属性值为main的标签。

css3选择器 伪类伪元素

CSS3选择器 在css3中新增了很多选择器，大部分浏览器都支持了，但是要知道坑爹的IE还在拖后腿，希望不久的将来IE能赶上来。下面就介绍一下css3中都增加了哪些选择器。 1.属性选择器 E[attr] →有attr属性的E元素。 E[attr^=’value’] →寻找属性值以value开头的元素。 E[attr$=’value’] →寻找以属性值value结束的元素。 E[attr*=’value’] →寻找属性值包含value的元素。 灵活运用，可以组合使用，例如： a[href^=’http://’][href*=’/folder2/’][href$=’.pdf’]{ } E ~ F { } 相邻兄弟连接符，选择的是文档树的同一层级中，紧邻元素E之后的任意元素F。 E + F { } 普通兄弟连接符，选择的是文档树的同一层级中，位于元素E之后的任意元素F，不管它是否直接相邻。 以上选择器大部分浏览器都支持，包括坑爹的IE。 2.伪类 E：first-child{ } //在css2引入，css3中增加11个新的结构伪类。 E：nth-child(n/2n/3n-1/odd/even){ } E：nth-of-type(n/2n/3n-1/odd/even){ } E：nth-last-child( ){ }和E：nth-last-of-type( ){ }与上面参数相同，但是元素要从最后一个算。 first-child{ }和:first-of-type{ } //选择其父元素的第一个子元素和其父元素的某种指定类型的第一个子元素。 last-child{ }和:last-of-type{ } //选择父元素的最后一个子元素和属于某种类型的最后一个子元素。 only-child和only-of-type，选择的是该元素有一个父元素，但没有任何的兄弟元素或者没有相同类型的兄弟元素。 例：p:only-of-type{ } p:only-child{ } 3.其它伪类 target伪类，指向网页内部特定元素的链接。例：

Lorem ipsum

Lorem Target伪类能够在涉及的URI被使用的时候，把样式应用到元素上。 #my_id:target{ } 其它例子.comment:target{ } empty伪类，选择没有子元素（包括文本节点）的元素。 例： 我是 td:empty{ } //只会应用到第二个td元素，因为其它两个包含有文本节点 root伪类，选择文档树中的第一个元素，它的唯一真正作用就是发生在为XML文档添

HTML+CSS基础知识点

HTML+CSS笔记 1.学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。 （1）HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 （2）CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 （3）JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。 2.添加样式如：