我爱编程

css选择器

2018-05-25  本文已影响0人  Scalelength

CSS全称为“层叠样式表(Cascading Style Sheets)”,它主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体等使用css样式的一个好处就是通过定义某个样式,可以让不同网页未知的文字有着统一的字体、字号或颜色等css的形式基本分为以下三种:
     (1)内联式    (2)嵌入式    (3)外部式

    (1)内联式:直接将css代码直接写入现有的HTML标签中。例如<p style="color:red">文本</p>
   (2)嵌入式:将css样式写入head/head中的style type="text/css"/style中。例如:p{ font-size:12px;}(3)外部式:将css代码写在一个单独的外部文件中,拓展名为.css。使用<link rel="stylesheet" type="text/css" href="文件源" />
注意三点:1.css样式文件名称用有意义的英文字母命名
                  2.rel="stylesheet" type="text/css"的固定写法不可更改
                  3.<link>一般写在<head>内部

优先级:内联式>嵌入式>外部式

也可以将css样方式css样式由选择符声明组成,声明又由属性和值组成
选择符:又称选择器,指明网页中要应用样式规则的元素
声明:在英文大括号里“{ }”中的就是声明
属性和值之间用英文冒号":"分割,中间有多条声明时,中间用英文分号“;”分隔

css选择器

    1、标签选择器选择器{样式;}
                例:(1)p{font-size:12px;//设置文字字号
                               color:red/#cccccc;//设置字体颜色
                               font-weight:bold;//设置字体加粗
                                }        这种方式是直接设置段落<p>标签的样式

                        (2)span{
                                    color:red;
                                     }            这种方式直接设置<span>标签的样式

    2、类选择器
            .类选择器名称{css样式代码;}
            以英文点开头,选择器名称可以任意起名(不能为中文)
            与之搭配的是class=“类选择器名称”
            在需要用css样式的地方使用class,并引用类选择器名称才能使标签内的内容变为css样式
            常用的标签有pspan等
            例如:p class="选择器名称"

    3、ID选择器
            #选择器名称{css样式代码;}
            以英文#号开头,引用时标签内设置id=“ID名称”
            引用格式与类选择器相同

            总结:2、3的相同点:可以应用于任何元素
            2、3的不同点:(1)ID选择器只能在文档中使用一次,类选择器可以反复使用
                                   (2)类选择器可以为一个元素设置多个样式,ID选择器是不可以的

    4、子选择器
            .类型名>标签名{css样式} 只针对第一个

     5、后代选择器
            .类型名 标签名{css样式} 在标签内的全部

    6、通用选择器
            * {css样式} 直接对整个页面中的所有标签进行样式更改

    7、伪类选择符
                a:hover{color:red;} hover:当鼠标触碰到引用此伪类的文字时发生变化
                它允许给html不存在的标签(标签的某种状态)设置样式

8、分组选择符
                h1,span{color:red}
                相当于给两个标签赋予的相同的样式
                样式的种类:

(1)font-weight:normal正规样式/bold加粗样式/xxpx像素大小

(2)color:#cccccc/red

2018年5月25日22:52:08

上一篇下一篇

猜你喜欢

热点阅读