CSS basics, Understanding CSS Styles

Source: Internet
Author: User

1. Understanding CSS Styles
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。如下列代码:        p{           font-size:12px;           color:red;           font-weight:bold;        }使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
Syntax for 2.CSS code
css 样式由选择符和声明组成,而声明又由属性和值组成,选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。声明:    在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。    当有多条声明时,中间可以英文分号“;”分隔,如下所示:        p{font-size:12px;color:red;}注意:    1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。    2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:            p{               font-size:12px;               color:red;            }
3. Inline CSS style sheet
内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:    <p style="color:red">这里文字是红色。</p>注意要写在元素的开始标签里,下面这种写法是错误的:<p>这里文字是红色。</p style="color:red">并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:    <p style="color:red;font-size:12px">这里文字是红色。</p>
4. Embedded CSS style sheet
嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:        <style type="text/css">        span{        color:red;        }        </style>嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在
5. External CSS style sheet
外部式css样式,就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在
6. Priority of three methods
内联式 > 嵌入式 > 外部式
7. Tag Selector
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的
8. Class Selector
类选择器在css样式编码中是最常用到的,** 语法:**.类选器名称{css样式代码;}注意:1、英文圆点开头2、其中类选器名称可以任意起名(但不要起中文)使用方法:第一步:使用合适的标签把要修饰的内容标记起来,如下:<span>胆小如鼠</span>第二步:使用class="类选择器名称"为标签设置一个类,如下:<span class="stress">胆小如鼠</span>第三步:设置类选器css样式,如下:.stress{color:red;}
9.ID Selector
在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:1、为标签设置id="ID名称",而不是class="类名称"。2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。

The difference between a class selector and an ID selector

1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
10. Sub-Selector
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如下代码:<ul class="food"><li>水果    <ul>        <li>香蕉</li>        <li>苹果</li>        <li>梨</li>    </ul></li><li>蔬菜    <ul>        <li>白菜</li>        <li>油菜</li>        <li>卷心菜</li>    </ul></li></ul>.food>li{border:1px solid red;}这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
11. Include (descendant) selectors
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:.first  span{color:red;}这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
12. Universal Selector
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:* {color:red;}
13. Pseudo-Class selectors
更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:red;}关于伪选择符:关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。
14. Grouping selectors
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:h1,span{color:red;}它相当于下面两行代码:h1{color:red;}span{color:red;}

CSS basics, Understanding CSS Styles

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.