前端学习之 CSS（一）

一:什么是 CSS?

·CSS 指层叠样式表 (Cascading Style Sheets)

·样式定义如何显示 HTML 元素

·样式通常存储在样式表中

·把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

·外部样式表可以极大提高工作效率

·外部样式表通常存储在 CSS 文件中

·多个样式定义可层叠为一个

二:CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

三:CSS的引入方式

1. 行内式

这种当时不推荐使用

<div>

<p style = "color:blue;">这个段落采用了CSS行内式。</p>

</div>

效果如下(style使得字体变蓝):

2. 内接样式

例子:

首先是head里的内容：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color:blue;
        }
    </style>
</head>

View Code

然后是body里的内容:

div>
    <p>
        这是一个内接样式
    </p>
</div>

View Code

最后是效果图:

3.外接样式

(1)链接式

html内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="03.css">
</head>
<body>
<div>
    <p>这是一个外链接</p>
</div>
</body>
</html>

View Code

css内容为：

p{
    color:red;
}

View Code

如图:

运行效果如下图:

(2) 导入式

不常用，因为在加载网页的时候，没有完全加载的时候会网页结构变形。

HTML例内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
        @import url("04.css");
    </style>
</head>
<body>
<div>
    <p>这是一个外链接2</p>
</div>
</body>
</html>

View Code

css内容为:

p{
    color:blue;
}

View Code

运行效果如下图:

四:选择器

具有特定属性的HTML元素样式

具有特定属性的HTML元素样式不仅仅是class和id。

css优先级,指的是浏览器加载css样式的先后顺序.

1.基本选择器

(1)标签(元素)选择器

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“。只要相同的标签效果都会产生

例:

首先是html上的内容是:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" href="05_biaoqian.css">
</head>

<body>
<p>p标签的效果</p>
body 标签的效果
<br>
<span>span标签的效果</span>
</body>
</html>

View Code

然后是css文件内容:

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器 {}前面是标签的名字*/
p{
    color: red;
    font-size: 20px;
}
span{
    color: brown;
}

View Code

两个文件的截图:

运行出来的效果图:

(2)类选择器

"." 加选中class名称

所谓类：就是class . class与id非常相似任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开。开发常用类选择标签。

例:

首先是html内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="05_lei.css">
</head>
<body>
<!-- 公共类    共有的属性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
     </div>
</body>
</html>

View Code

CSS的内容为：

.lv{
     color: green;
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;
/*表示在文本下加下划线*/
}

View Code

两个代码文件关系如箭头，第一个p标签有两种类为lv 和 big ，将达到两种类的效果，同理另外另个p标签也是如此。

运行后的结果如图：

总结：

不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式

每个类要尽可能的小，有公共的概念，能够让更多的标签使。

(3)id选择器(#+id名称)

# 加选中id名称

同一个页面中id不能重复。

任何的标签都可以设置id

id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值。

例：

html内容为：
<div id="box">
    <p id = "s1">id选择器1</p>
    <p id="s2">id选择器2</p>
</div>


css内容为：
#box{
    background:green;
}
#s1{
    color: red;
}
#s2{
    font-size: 30px;
}

View Code

效果截图为：

CSS优先级，指的是浏览器加载CSS样式的先后顺序。

权值越大，优先级越高，以下是三个选择器的权值比较。

2.高级选择器

(1)后代选择器

例：

首选是html里面的内容为：

<div class="father">
    father 层
    <p class="box1">
        father 的子层
        <span class="sun">
            father 的孙子级层
        </span>
    </p>
</div>
<span class="noson">不属于father层里</span>

View Code

然后是css内容为：

.father .sun{
    color: darkorange;
}
.father .box1{
    color: blue;
}
.father{
    background: #666666;
}

View Code

然后是对效果进行截图：

首选是css中后代选择器.father .sun和.father .box1 对后代进行修饰，然后class =”noson”不是father的子类，所有不影响。

(2)子代选择器

使用>表示子代选择器。比如container>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

例：

前端html代码为：

<dic class="container">
    最外层
    <p class="son">
        这是儿子层
        <p class="sonson">
    这是孙子层
</p>
    </p>
</dic>

View Code

前端css代码为：

.container>p{
    color: yellowgreen;
}

View Code

效果图：

从效果分析得，container>p,然后孙子层会继承儿子层的效果。

(3) 并集选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器。

例：

首先是html内容为：

<h3>这是标题3的内容</h3>
<a href="https://www.cnblogs.com/hszstudypy">跳转到我的博客</a>

View Code

然后是css内容为：

h3,a{
    color: #008000;
    text-decoration: none;
}

View Code

效果为：

从效果分析,通过逗号隔开的都会产生这个css内容的效果。

比如像百度首页使用并集选择器。

这样的写法通常出现在高访问量的网站上：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}

(4) 交集选择器

两个标签有相同的属性，然后css对这个属性进行修饰的效果将表现在这两个标签上，这也就是这个两个之间的交集

例：

首先是html代码：

<!--html代码-->
<div>
    <h4>高级选择器</h4>
    <p class="active">这是一个p</p>
    <h4 class="active">交集选择器</h4>
</div>

View Code

然后是css代码：

h4 {
    width: 100px;
    font-size: 14px;
    background: #00BFFF;
}
.active {
    color: red;
    text-decoration: underline;
}

View Code

效果图：

在上面的代码可知，第二个h4 class=”active”和p之间的交集就是active，所有都有交集的效果，而第一个h4是没有和p有交集的，所有没有红色字体的效果。

3.属性选择器

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

(1)属性名称匹配

下面的例子是把包含标题（title）的所有元素变为蓝色：

例：

html上代码：

<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="mycnblogs" href="https://www.cnblogs.com/hszstudypy/">我的博客园</a>

View Code

css上代码:

[title]
{
color:blue;
}

View Code

效果图：

(2)完整匹配（属性和值选择器）

下面的实例改变了标题title='mycnblogs'元素的边框样式:

在(1)的css内容上加了：

[title=mycnblogs]
{
    border:5px solid green;
}

View Code

效果图为：

(3) 开头结尾匹配和包含匹配

开头匹配为：属性^=值

结尾匹配为：属性$=值

包含匹配为：属性*=值

首先是html的值：

<div class="mdiv">
    我是div的内容
    <p class="myp">

        我是div里的p内容
    </p>
    <p class="mype2">
        我是div里的第二p内容
    </p>

</div>
<p class="otherp">
    我是另外一个的内容
</p>

View Code

然后是css的值为：

[class^=my]{
    color: #00BFFF;

}
[class$=p]{
    text-decoration: underline;
}

[class*=e]{
    background: yellow;
}

View Code

效果图:

效果及代码分析：首先是class以my开头的字体淡蓝色，然后是p结尾的加下划线，最后是包含e的背景为黄色。

(4)表单样式

属性选择器样式无需使用class或id的形式:

例：

首先是html代码：

<form name="input" action="demo-form.php" method="get">
name:<input type="text" name="fname" value="" size="20">
pwd:<input type="text" name="lname" value="" size="20">
<input type="button" value="Example Button">
</form>

View Code

然后是css代码：

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

View Code

结果为：

Input里面相应的type修饰相应的值。

4.伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte。

"爱恨准则"

:link

:visited

:hover(***)鼠标悬浮时,触发

:active

例：

前端html代码为：

<div class="box">
    <ul>
        <li class="item1"><a href="#">没有被访问</a></li>
        <li class="item2"><a href="">访问过后</a></li>
        <li class="item3"><a href="">鼠标悬停</a></li>
        <li class="item4"><a href="">鼠标摁住</a></li>
    </ul>
</div>

View Code

前端css样式代码为：

*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
    color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{
    color: red;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
    color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
    color: yellowgreen;
}

View Code

效果需要自己运行才可以清楚看到

5.伪元素选择器

例：

html代码:

<p>这是一个p标签</p>

css代码：

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;
        }

/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'hello';
        }

/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:'after';
            color: red;
            font-size: 40px;
        }

View Code

posted @ 2019-01-20 20:24 pycoder_hsz 阅读(288) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

pycoder_hsz

前端学习 之 CSS（一）

一:什么是 CSS?

二:CSS语法

三:CSS的引入方式

1. 行内式

2. 内接样式

3.外接样式

(1)链接式

(2) 导入式

四:选择器

1.基本选择器

(1)标签(元素)选择器

(2)类选择器

(3)id选择器(#+id名称)

2.高级选择器

(1)后代选择器

(2)子代选择器

(3) 并集选择器

(4) 交集选择器

3.属性选择器

(1)属性名称匹配

(2)完整匹配（属性和值选择器）

(3) 开头结尾匹配和包含匹配

(4)表单样式

4.伪类选择器

5.伪元素选择器

前端学习之 CSS（一）