CSS基础学习

标签：限制   tle   css   隐私   改变   交集   内联   层叠样   浏览器   

1 简介

层叠样式表，网页实际时一个多层结构，可以为每一层设置样式，用css设置网页中的样式

2 方式

1、在标签内部通过style属性来设置元素的样式

使用内联样式，样式只能对一个标签生效，不好维护

<p style="color:red; font-size:60px;">hello world</p>

2、将样式写到head里的style标签里

利用选择器选中元素并为其设置样式，可以同时为多个标签设置样式。

只能对一个页面起作用，但是不能跨页面使用

<style>
    p{color:red; font-size:60px;}
</style>

3、外部样式表

将样式写一个css文件里, 通过link标签进行引用

可以使用浏览器的缓存机制，从而加快网页的加载速度

<link rel="stylesheet" href="./css/p.css">

3 css的基本语法

• css的注释

// 注释
/*注释*/

• 选择器，选择指定的元素

• 声明块，为元素设置样式，由一个个声明组成，是一个名值对组成，以；结尾

4 选择器

• 元素选择器，根据标签名选中指定元素

例如：p{} h1{} div{}

• id 选择器，根据元素的id属性值选择元素，html 中 id属性值是唯一的

<p id="abc">hello</p>

例如： #abc{}

• 类选择器，根据元素的class属性，html 中 class属性值可以重复, 可以写多个class class名之间用空格隔开

<p class="cdf gh"></p>

例如： .cdf{}

• 交集选择器，如果有元素选择器必须以元素选择器开头

<p class="cdf"></p>

例如：选择器1选择器2选择器3 {}，p.cdf {}

• 选择器分组（并集选择器）

<p>hello</p>
<span>hello</span>

例如：选择器1，选择器2 p, span {}

• 关系选择器

<div>
    <p>hello
       <span>hh-span</span>
    </p>
    <span>hello—span</span>
 </div>

子元素，直接被包含的元素

例如：div > span {}

父元素，直接包含的元素

祖先元素，直接或间接包含后代元素

后代元素，直接或间接被包含

例如： div span {}

兄弟元素，拥有相同父元素是兄弟元素

例如： p + span {} 找p元素下一个兄弟元素

? p ～ span {} 找p元素下边所有兄弟元素

• 属性选择器

<p title="abc">hello</p>

[属性名] 选择含有指定属性的元素

[属性名 = 属性值] 选择含有指定属性和属性值的元素

[属性名^ = 指定值] 选择属性值以指定值开头的元素

[属性名$ = 指定值] 选择属性值以指定值结尾的元素

[属性名* = 指定值] 选择属性值含有指定值的元素

例如：p[title] { } p[tiltle = abc] {}

• 伪类选择器

    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

伪类用来描述元素的特殊状态，比如：第一个子元素，被点击的元素，鼠标移入的元素，伪类一般用 : 开头

例如：ul > li : first-child {} ul > li : nth-child {} ul > li : 2nth-child {}

? ul>li :nth-child(even) {} even 是偶数 odd是奇数

:first-child :last-child :nth-child :first-of-type :last-of-type :nth-of-type

:not {} 将选中的去除，ul > li:not(:nth-of-type) {}

链接伪类

a:link {} 没访问过的链接

a:visited {} 访问过的链接 ，由于隐私限制，只能改变颜色

a:hover {} 鼠标移入

a:active {} 鼠标点击

• 伪元素

表示网页中特殊的位置，使用 :: 开头

p::first-letter {} 第一个字母

p::first-line {} 表示第一行

p::selection {} 表示选中的东西

p::before { content = ‘a‘ }元素的开始，必须结合content属性

p::after {content = ‘abc‘ }元素的结束，必须结合content属性

CSS基础学习

标签：限制   tle   css   隐私   改变   交集   内联   层叠样   浏览器   

原文地址：https://www.cnblogs.com/lichunl/p/14165851.html