css基础(1)

css基础(1)

css(外观)

css初识

css(Cascading Style Sheets)通常称层叠样式表或css样式表,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图形的外形(宽高、边框样式。边距等)以及版面的布局等外观显示样式。

css的样式规则

h1 { color : red; font-size:16px;} 选择器 {属性:属性值;}
1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示。

css的使用

  1. 在标签里面例如<a href="#" style="color:red;"> 行内样式
  2. 在head里面<head><style> a{color:red;} </style></head> 内部样式表
  3. 新建一个css文件外部引入需要在<head> <link rel="stylesheet" href="index.css"></head>引入 外部样式表
    他们的优先级是3<2<1<!important

css字体样式表

font-size:字号大小
字体单位
font-family:字体
p{ font-family:“微软雅黑”;}

可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
注意:

  • 现在网页中普遍使用14px+。
  • 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
  • 各种字体之间必须使用英文状态下的逗号隔开。
  • 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
  • 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: “Times New Roman”;。
  • 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
    font-weight:字体粗细
    字体加粗除了b和strong标签之外,可以用css来实现,但是css是没有语义的。
    font-weight的属性值有normal,bold,bolder,lighter,100-900(100的整数倍)。
    font-style:字体风格
    字体倾斜除了用i和em 标签之外可以用font-style来实现。
    属性值normal(正常),italic(斜体),oblique(倾斜)
    可以用font设置全部属性
    font:font-style font-weight font-size/line-height font-family
    使用font属性时,必须按照上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。

开发者工具(Chrome)

以后代码出问题,第一件事就是打开开发者工具
按F12 或者是ctrl+shift+i 或者点击空白处选择 检查

选择器

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。

  • 标签选择器 规则 标签名{属性:属性值;}或者 元素名{属性:属性值;}
  • 类选择器 规则 .类名{属性:属性值;} 要在元素标签上面加class属性例如<a class="类名"></a>
    注意:1.class可以有多个<a class="类名1 类名2"></a>2.不建议使用_下划线命名3.不要以纯数字、中文等命名
  • id选择器 规则 #类名{属性:属性值;} 例如<a id="类名"></a> id只有一个
  • 通配符选择器 规则 *{属性:属性值;} 用 * 标签是作用范围最广的一般
*{
margin:0; /*清除外边距*/
padding:0;/*清除内边距*/
}

  • 伪类选择器
  1. 链接伪类选择器
    a :link 未访问的链接
    a :visited 已访问的链接
    a :hover 鼠标移动到的链接
    a :active 选定的链接
    记忆 love hate
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>链接伪类选择器</title>
    <style>
        /* 未点击访问的链接 */
        a:link {
            color: red;
        }

        /*点击访问后的链接 */
        a:visited {
            color: blue;
        }

        /* 鼠标移动到链接 */
        a:hover {
            color: yellow;
        }

        /* 选定的链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="http://www.baidu.com">点击</a>
    <a href="#">点击我</a>
</body>

</html>
  1. 结构伪类选择器(css3)
    :first-child:选取属于其父元素的首个子元素的指定选择器
    :last-child:选取属于其父元素的最后一个子元素的指定选择器
    :nth-child(n):匹配属于其父元素的第N个子元素,不论元素类型
    : nth-last-child(n):选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
    n 可以是数字、关键词或公式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位置伪类</title>
    <style>
        /* 第一个li */
        li:first-child {
            color: cadetblue;
        }

        /* 最后一个li */
        li:last-child {
            color: chartreuse;
        }

        /* 第二个li */
        li:nth-child(2) {
            color: crimson;
        }

        /* 倒数第二个li */
        li:nth-last-child(2) {
            color: darkgoldenrod;
        }
    </style>
</head>

<body>
    <ul>
        <li>aa
            <ul>
                <li>星期一</li>
                <li>星期一</li>
            </ul>
            <span>星期一</span>
            <span>星期一</span>
        </li>
        <li>
            <span>星期二</span>
        </li>
        <li>
            <span>星期三</span>
        </li>
        <li>
            <span>星期四</span>
            <span>星期四</span>
            <span>星期四</span>
            <span>星期四</span>
        </li>
    </ul>
</body>

</html>

位置伪类的效果
3.目标伪类
:target目标伪类选择器,选择器可用于选取当前活动的目标元素
:target{
font-size:18px;
color:red;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目标伪类选择器</title>
    <style>
        #img1:target {
            color: darkgoldenrod;
            font-size: 20px;
        }

        #img2:target {
            color: green;
            font-size: 14px;
        }

        #img3:target {
            color: pink;
            font-size: 35px;
        }
    </style>
</head>

<body>
    <div id="img1">
        <div id="img2">
            <div id="img3">
                <ul class="mainImg">
                    <li>星期一</li>
                    <li>星期二</li>
                    <li>星期三</li>
                </ul>
            </div>
        </div>
    </div>
    <ul class="controller">
        <li><a href="#img1">1</a></li>
        <li><a href="#img2">2</a></li>
        <li><a href="#img3">3</a></li>
    </ul>
</body>

</html>
在这里插入图片描述

根据锚点做的点击换图片

<!DOCTYPE html>
<html ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200427133752978.png)
lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            overflow: hidden;
            height: 150px;
            width: 350px;
        }

        li img {
            width: 350px;
            float: left;
            height: 150px;
        }

        li a {
            text-decoration: none;
            color: #ccc;
            float: left;
            font-size: 18px;
            margin-right: 25px;
        }
    </style>
</head>

<body>
    <ul>
        <li><img src="timg (1).jpg" id="a1"></li>
        <li><img src="timg (2).jpg" id="a2"></li>
        <li><img src="timg (3).jpg" id="a3"></li>
        <li><img src="timg (4).jpg" id="a4"></li>
        <li><img src="timg (5).jpg" id="a5"></li>
        <li><img src="timg (6).jpg" id="a6"></li>
        <li><img src="timg (7).jpg" id="a7"></li>
    </ul>
    <ul>
        <li><a href="#a1">1</a></li>
        <li><a href="#a2">2</a></li>
        <li><a href="#a3">3</a></li>
        <li><a href="#a4">4</a></li>
        <li><a href="#a5">5</a></li>
        <li><a href="#a6">6</a></li>
        <li><a href="#a7">7</a></li>
    </ul>
</body>

</html>
在这里插入图片描述

发表评论