CSS学习

CSS概念:

  • CSS 指的是层叠样式表* (Cascading Style Sheets)
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • CSS 节省了大量工作。它可以同时控制多张网页的布局
  • 外部样式表存储在 CSS 文件中

语法:

选择器{一条或者多条声明}

如:

p {
    color: red;
    font-size: 12px;
    }

其中p为标签选择器,color:red和font-size:12px均为声明。

属性和属性之间以";"分隔;

属性和属性值之间以“:”分隔;

CSS基础选择器:

<1>标签选择器

标签名 { 声明}
p {color: red}

标签选择器就是html代码中的标签。

之前的html、body、h系列的标签、p、div、img等我们都可以使用标签选择器来设置对应的css样式属性。

使用标签选择器后,整个该类标签即被选择,为同类型标签设置样式,但缺点在于无法差异化选择。

<2>类选择器

<style>
.red {color: red}    自定义类名
</style>
<div class="red">文本</div>

类选择器可以单独选择一个或者多个标签,可以实现差异化设置。

任何的标签元素都可以添加类(class),但是不同的是类是可以重复,有“归类”的概念,并且同一个标签中可以携带多个类,用空格隔开。

需要注意的是:

1、英文圆点开头

2、其中类选择器名称可以任意起名(最好不要起中文,也不要用纯数字来进行命名);

3.一个标签可以指定多个类名,但最好有公共类的存在。

调用多类名时,类名间用空格隔开;

<3>id选择器

在网页中所有的标签都可以设置id,并且id不能重复(即id名称必须唯一)。为标有特定id的HTML元素指定特定样式。

语法:

#ID选择器名称{
    声明
}

与类选择器的区别:

1.id选择器样式通过#定义,结构用id调用。

2.id选择器只能调用一次,其他元素无法使用。

<4>通配符选择器

通配符选择器(*)选择页面上的所有的 HTML 元素。

* { 声明}

用“ * ”定义,表示所选页面所有元素[不需要调用];

css复合选择器:

<1>后代选择器【包含选择器】

     可以选择父元素里的子元素进行改变样式。

语法:

/*后代选择器可以使用具有父子关系的元素进行选择(最少两个),每个子元素可以用标签方式表达,也可以用类名,id,伪类等表达*/
element1 element2 element3{
样式;
}

element2为element1的后代,element3为element2的后代;

<2>子选择器

     选择作为某元素最近的一级子元素(仅选择1个)。

语法:

元素1 >元素2
   {样式}

<3>并集选择器

     选择多组标签,同时为他们定义相同的样式,通常用于集体声明。

   语法:

元素1 ,元素2
{   样式   }

任何形式基础选择器都可以作为元素;

元素之间以逗号分隔,最后一个元素后面不需要加逗号;

<4>伪类选择器

用于向某些选择器添加特殊的效果。书写最大的特点是用冒号表示。

1.链接伪类选择器:

a: link                    

           a:link                               选择所有未被访问的链接
           a:visited                               选择所有已被访问的链接
           a:hover                               选择鼠标指针位于其上的链接
           a:active                               选择活动链接(鼠标按下而未松开时的链接)

一般开发中较为常用的是hover 

 书写时注意事项:

·按照LVHA(link   visited hover active)顺序书写,不能更改顺序,如果更改顺序,可能会使原来的效果不存在。

·链接标签(a)在浏览器中有默认样式(蓝色,有下划线),所以需要单独给a指定样式。

2.focus伪类选择器(input类的表单元素)

如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus {
            background-color: gainsboro;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

 将获得光标的元素的背景改为灰色。

鼠标位于第三个上,所以背景变为灰色。

字体属性

1.使用font-family定义文本的字体系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-family: "宋体";
        }
        div {
            font-family: "Microsoft YaHei";
        }
    </style>
</head>
<body>
    <p>这是宋体</p>
    <div>这是微软雅黑</div>
</body>
</html>

Tips:

若有多个字体,则用“,”分隔,系统将按顺序选择存在于浏览器中的字体。

多个单词组成的字体,最好加上引号。【单双均可】

尽量使用系统默认字体,保证用户浏览器可以正常使用。

用类选择器直接给body指定字体,页面均会以此字体显示。

2.使用font-size定义字体大小

p {
    font-size: 20px;
}

 谷歌默认字体是16px,不同的浏览器默认字体大小不一样,所以最好定义字体大小;

给body定义字体大小后,将除标签元素外全部应用该大小。

3.使用font-weight定义字体粗细

normal默认。正常字体。值为400
bold粗体。与<b>作用一致。值为700
bolder特粗体
lighter细体

4.使用font-style定义字体风格

italic斜体
normal默认

 5.字体复合属性(合起来的写法)

div {
      font:  font-style  font-weight font-size/line-height font-family 
}

其中font-size和font-family不可省略;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值