CSS入门基础

最新推荐文章于 2025-02-24 16:23:13 发布

李子爱吃芒果

最新推荐文章于 2025-02-24 16:23:13 发布

阅读量405

点赞数 1

分类专栏：【CSS】文章标签： css

本文链接：https://blog.youkuaiyun.com/u014523300/article/details/50879305

版权

【CSS】专栏收录该内容

1 篇文章

订阅专栏

CSS

档添加样式的三种方法

1、行内样式

<p style="font-size:12px;color:red" >you override the default styles.</p>
//行内样式影响它所在的标签，而且会覆盖嵌入样式和链接样式。
//优先级最高

2、嵌入样式

<head>
<style type="text/css">
 p{
  color:red
}
</style>
</head>
//嵌入样式仅限于当前页面（覆盖链接样式
//优先级其次

3、链接样式

<link href="style.css" rel="stylesheet" type="text/css"/>
//作用于整个网站
//优先级最低

上下文选择符

标签1 标签2｛声明｝
//标签1是祖先元素 
//标签2是选择目标
例：article p{font-weight:bold;}

特殊的上下文选择符

示例代码：
<section>
 <h2>An H2 Heading</h2>
 <p>This is paragraph 1</p>
 <p>Paragraph 2 has <a href="#">a link</a> in it.</p>
 <a href="#">Link</a>
</section>

1、子选择符>

标签1>标签2
//标签2必须是标签1的子元素
//反过来，标签1必须是标签2的父元素之外的其他祖先元素
例 section > h2 {font-style:italic;}展示了子选择符的结果

2、紧邻同胞选择符+

标签1+标签2
//标签2必须紧跟在其同胞标签1的后面
例 h2 + P {font-variant:small-caps;}

3、通用选择符

*
//通配符，它匹配任何元素
例 *｛color:green;｝
//所有元素（文本和边框）都变成绿色
例 p *{color:red;}
//p包含的所有元素的文本都变成红色
例 section * a{font-size:1.3em;}
//任何是section孙子元素，而非子元素的a标签都会被选中

伪类

1、链接伪类

a:link{}      //链接等点击
a:visited{}   //点击过此链接
a:hover{}     //鼠标悬停在链接上
a:active{}    //链接正在被点击
//好记:"LoVe?HA!"(大写字母就是每个伪类的头一个字母

2、:focus伪类

e:focus     //e代表任何元素，如p、h1、section、等等
input:focus{
border:1px solid bulue;
}

3、:target伪类

e:target   //如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标，用:target伪类选中它
例 <a href="#more_info">More Infomation</a>
<h2 id="more_info">This is the infomation you are looking for.</h2>
CSS规则：
#more_info:target{background:#eee}
//单击页面链接，转跳ID为more_info的那元素，并添其样式

4、结构化伪类

根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是声明
1 e:first-child
  e:last-child
例 li:first-child{color:red;} //第一个li元素添其红色
2 ：nth:child(n)
e表示元素名，n表示一个数值(也可以用add或even)
例 li:nth:child(3)//一组列表项中每个第三项

伪元素

1 e::first-letter  //段落首字母放大
2 e::first-line   //文本段落的第一行
3 e::before
  e::after
例<p class="age">25</p>
p.age::before{content:"Age："；｝
p.age::after{content:"years";}
结果：Age:25 years.

层叠

浏览器层叠各个来源样式的顺序：

浏览器默认样式表
用户样式表
作者链接样式表（按照它们链接到页面的先后顺序）
作者嵌入样式
作者行内样式

计算特指度：ICE公式

选择符中有一个ID，就在I的位置加1；
选择符中有一个类，就在C的位置加1；
选择符中有一个标签名（元素名），就在E的位置加1；
得到一个三位数

#

body p#largetext ul.mylist li   //1-1-4特指度=114

查理版简单层叠要点

规则一：包含ID的选择符 > 包含类的选择符 > 包含标签名的选择符
规则二：行内样式 > 嵌入样式 > 链接样式
规则一 > 规则二 （如果选择符特指度更高）， 无论在哪里，都会胜出
规则三： 设定的样式胜过继承的样式，此时不考虑特指度