码迷,mamicode.com
首页 > Web开发 > 详细

css上

时间:2019-10-14 01:32:17      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:文件   耦合性   引入   type   文本   多个   fir   ali   doctype   

CSS(上)

什么是CSS?

CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。

CSS的优点

  1. 使数据和显示分开
  2. 降低网络流量
  3. 使整个网站视觉效果一致
  4. 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)

比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。

CSS的引入方式

行内样式

<p style="color: red">您好</p>

内部样式

<style>
        div{
            color:red;
        }
    </style>
    <!--我们的<style>标签要写在<body>的外面-->


<div>我就是这么强大</div>

eg:这是个在pycharm中的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的引入方式</title>

    <style>
        div{
            color:red;
        }
    </style>
    <!--我们的<style>标签要写在<body>的外面-->

</head>
<body>

<div>我就是这么强大</div>

</body>
</html>

外部样式

外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式

<link rel="stylesheet" href="01.css">

eg:

01.css

div {
    color: aqua;
}

css的引入方式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的引入方式</title>
</head>
<body>

<link rel="stylesheet" href="01.css">
<div>我就是这么强大</div>

</body>
</html

CSS的两大特性

继承性

给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。

层叠性

权重大的标签覆盖掉了权重小的标签,谁的权重大,浏览器就会显示谁的属性

CSS选择器

基本选择器

元素选择器

你要给那个标签上面加上样式,你就在<style>中写哪个标签就好了,不过只要在这也页面一样的标签都会被改掉,适用于批量的,统一的样式。

   <style>
        div{
            color: blue;
        }
    </style>

<div>基本选择器</div>

ID选择器

适用于特定标签设置特定样式

    <style>
        #d2{
            color: red;
        }
        /* # 代表的就是一个标签的ID*/
    </style>

<div id="d2">ID选择器</div>

类选择器

标签中的class属性如果有多个,要用空格分隔,适用于给某些标签设置样式

 <style>
        /*这个 . 就代表类*/
        .c2{
            color: red;
        }
        .c3{
            color: blue;
        }
        .c4{
            color: yellow;
        }
     /*我们可以对不同的类的属性的标签设置不同的颜色*/

 </style>

 <div class="c2">ID选择器2</div>
 <div class="c3">ID选择器3</div>
 <div class="c4">ID选择器4</div>

组合选择器

组合选择器

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

<style>
    .d2,p{
        /* class="d2"的div标签和p标签都会变为红色*/
        color: red;
    }
</style>
 
<div class="d2">哈哈哈</div>
<p>p标签</p>
<div class="c">9098</div>

后代选择器

使用 空格 表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)

<style>
    div div{
        color: red;
    }
    /*div标签里面的所有div后代都会变为红色*/
</style>


<div>我是你爸爸我真伟大
    <div>我是儿子1</div>
    <div>我是儿子2
        <div>我是孙子</div>
    </div>
</div>

儿子选择器

使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代元素p。

<style>
    /*选择所有父级是 <div> 元素的 <p> 元素*/
    div>p{
        color: red;
    }
</style>

<div>我是你爸爸我真伟大
    <div>我是儿子
        <p>我是孙子</p>
    </div>
</div>

毗邻选择器

多个选择器之间使用 + 隔开。

<style>
    /*选择所有紧接着<div>元素之后的<p>元素*/
    div+p{
        color: blueviolet;
    }
</style>
 
<p>我是个p</p>
<div>我是你爸爸我真伟大</div>
<p>我也是个p</p>

兄弟选择器

多个选择器之间使用 ~ 隔开。

<style>
    /*span后面所有的兄弟class="a"的标签*/
    /*我也是个p这个标签不是span的兄弟,他就不会显示*/
    span~.a{
        color: blueviolet;
    }
</style>
 
<div>
    <span>哈哈哈</span>
    <h1 class="a">标题1</h1>
    <h2 class="a">标题2</h2>
    <p>我是个p</p>
    <h4 class="a">标题4</h4>
</div>
<p class="a">我也是个p</p>

更多选择器

属性选择器

标签[属性]表示用于选取带有指定属性的元素。

<style>
    /*选取带有name属性的元素。*/
    div[name]{
        color: pink;
    }
</style>
 
<div name="123">我的名字是123</div>
<div name="456">我的名字是456</div>
<div name="789">我的名字是789</div>
<style>
    /*选取带有name="456"属性的元素。*/
    div[name="456"]{
        color: pink;
    }
</style>
 
<div name="123">我的名字是123</div>
<div name="456">我的名字是456</div>
<div name="789">我的名字是789</div>

通用选择器

使用 ***** 表示通用选择器。

<style>
        /*所有标签的颜色都会变为红色*/
        *{
            color:red;
        }
</style>
 
<div>标签1</div>
<span>标签2</span>
<p>标签3</p>

伪类选择器

<style>
    /* 未访问的链接 */
    a:link {
      color: #FF0000
    }
    
    /* 已访问的链接 */
    a:visited {
      color: #00FF00
    }
    
    /* 鼠标移动到链接上 */
    a:hover {
      color: #FF00FF
    }
    
    /* 选定的链接 */
    a:active {
      color: #0000FF
    }
    
    /*input输入框获取焦点时样式*/
    input:focus {
      outline: none;
      background-color: #eee;
    }
</style>
 
<a href="form表单.html">点我</a>

伪类元素选择器

first-letter

常用的给首字母设置特殊样式:

p:first-letter {
  font-size: 48px;
  color: red;
}
before
/*在每个<p>元素之前插入内容*/
p:before {
  content:"哈哈哈";
  color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
  content:"哈哈哈";
  color:blue;
} 

before和after多用于清除浮动。

选择器的优先级

有些时候我们可能会给同一个标签设置多个样式,遇到了重叠项的设置又该听谁的呢?这里就要用到选择器的优先级。

行内样式 1000> id选择器 100 > 类选择器 10 > 标签选择器 1 > 继承样式 0

CSS属性相关(了解)

宽和高

width属性可以为元素设置度。

height属性可以为元素设置度。

==块级标签才能设置宽度,内联标签的宽度由内容来决定==

字体

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字体大小

p {
  font-size: 14px;
}

如果设置成inherit表示继承父元素的字体大小值。

字重(粗细)

font-weight用来设置字体的字重(粗细)。

描述
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 - 如: FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果。

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线:

a {
  text-decoration: none;
}

首行缩进

text-indent: 32px;

将段落的第一行缩进 32像素:

p {
  text-indent: 32px;

css上

标签:文件   耦合性   引入   type   文本   多个   fir   ali   doctype   

原文地址:https://www.cnblogs.com/wwbplus/p/11669222.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!