二、认识CSS

汽水泡泡
38 阅读5分钟

一.a元素补充

  • 锚点链接

image.png

  • 伪链接

    • a元素连接不能掉href属性

  • 图片链接跳转

    • img和a一起使用可以实现图片链接, a链接不一定是跳转新网页,还可以跳转发邮件,下载项目等....

二. URL->input

  • 访问资源的过程 域名通过DNS解析转成唯一标识的IP地址,通过IP地址找到服务器,解析用户请求并返回

  • URL的构成->协议头"//主机IP:端口号/路径/parameters?query#fragment

    • 协议头一般是http和https
    • http的端口号是80
    • query是请求

  • 什么是url

    • Uniform Resource Locator(统一资源定位符
    • 互联网上每个资源都有唯一的一个url

image.png

三. 认识CSS

  • css属性名都是小写

    还未写css的时候,html元素自带样式是浏览器加的.

四. CSS引入方式

  • 内联样式

  • 文档样式表

  • 外部样式

    • 开发网页特性: 结构和样式分离
    • 便于维护, .css结尾
    • 使用link引入样式
    • 也可使用@import url(" ")引入样式
    • 层叠:针对同个元素重叠的样式会层叠,下面的覆盖上面的
    • 两个css文件可以从一个文件引入到另外一个css

五.CSS基础选择器

  • 通配选择器(少用)

    • *
    • 应用场景-去掉所有元素body自带的内边距和外边距 *{ margin:0 padding:0 }

  • 元素选择器(少用)-元素名都一样,很混乱

  • 类选择器(常用)

    • class相同,样式设置相同

    • 一个元素是可以有多个类的,多个类以空格进行分割

    • 类的名字的规范

      • 尽量见名知意--语义化

      • 当多个单词形成类名时,以下面方式连接

        • 使用中划线-连接:large-font

        • 使用下划线连接:large_font

        • 使用驼峰法连接:largeFont

        补充: 驼峰标识

        小驼峰:第一个单词的首字母小写,后面遇到一个单词字母就大写

   适用场景: html js函数名字

大驼峰:所有的单词字母都大写

    适用场景: js中定义类的名字

  • id选择器

    • 适用-大门类划分
    • id名称在同一个页面中不要重复

六. CSS常见的属性

  • color:设置前景色

  • font-size:设置文字的大小

  • backgroud-color背景颜色

  • width和height

    • 行内元素设置宽度和高度是无效的,比如 设置display:inline-block/display:block

七. 颜色空间RGB

  • 单词关键字

  • rgb/rgba

    • a:alpha:0~1
      • 0表示完全透明
      • 1表示完全不透明

  • 十六进制

    • 有些用三位数,用#rgb代替#rrggbb
    • 表示RGBA全部是0的时候,使用transparent

八. 文本属性

  • text-decoration

    • none-去除所有的下划线包括a元素

    • 给其他元素添加装饰线

      • overline添加上划线
      • line-through添加删除线,中间横穿
      • underline添加下划线
  • letter-spacing设置字母之间的间距w o r d
  • word-spacing设置单词之间的间距my word
  • text-transform用于设置文本大小写转换
    • capitalize:设置首字母大写
    • uppercase:设置所有的字母大写
    • lowercase:设置所有字母小写
    • none:什么都不设置
  • text-indent精准控制缩进
    • 1em是相对父元素字体大小, 1em=1*当前px
    • rem是相对html根元素的大小
  • text-align设置元素内容在元素中的水平对齐方式
    • 默认值是left
    • right内容靠右对齐
    • center居中对齐
    • justify对最后一行没有效果,对其他行左右两边对齐把一行剩余空间平分到单词
    • text-align-last:justify:操作最后一行

九.字体属性

  • font-size设置文本字体的大小

    • em基于父元素的font-size大小
    • 一般设置的字体大小在12px以上

  • font-family设置字体名称-用什么字体显示

    • 默认使用微软雅黑-Microsoft YaHei'
    • 避免操作系统中没有这种字体,会设置多个字体,如果系统没找到设置的这些字体就使用系统默认字体
    • 从左向右选择字体,直到找到有用字体
    • 英文字体只适用于英文,中文字体即适用中文也适用英文
    • 如果在开发中,中英文使用不同的字体,->将英文字体写在前面,中文字体写在后面
    • 当公司没有要求的时候,把大公司的字体拷过来
    • 建议给字体都加上单引号
    • @import url('')->加单引号将里面的内容看成一个整体

  • font-weight设置文本的粗细

image.png - strong和h1和b标签浏览器设置font-weight属性默认bold

-   nomal:400, bold:700(使用最多)

  • font-style设置文字常规和斜体(常用)

    • 斜体元素i(做小图标)和em标签
    • italic前提是需要font-family支持这种斜体

  • font-variant影响小写字母的显示样式

  • line-height用于设置文本的行高

    • 一行文本占据的高度不一定是文本内容本身占据的高度

    • div默认等于文字的行高

    • 文本间有间距,所以有行高,方便阅读

    • 行高是两个基线之间的距离,行高=文本内容的高度+行距

      • 行距是底线到下一行文字顶部之家的距离

image.png

总结:div=行距+文本内容高度=行高

line-height=文本内容高度+行距

div的高度就是line-height的高度

想要设置div的高度并且文字内容居中,可以只设置line-height不设置height->垂直居中line-height = height

  • font是个缩写属性

    • font后面可以跟多个值

image.png

注意:font-weight/line-height,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>
​
        /* 1.选择title属性里面只要包含one,都设置样式 */
        /* [title*="one"] {
            background-color: #f00;
        } */
​
        /* 2.当title属性值是one,设置样式 */
        /* [title="one"] {
            background-color: #f00;
        } */
​
        /* 3.当title属性以one开头,设置样式 */
        /* [title^="one"] {
            background-color: red;
        } */
​
        /* 4.选择title属性以one结尾,设置上样式,这里要注意one值也是 */
        [title$="one"] {
            background-color: red;
        }
​
    </style>
</head>
<body>
    <p title="one">文字内容1</p>
    <a href="#" title="one two">文字内容2</a>
    <span title="onetwo">文字内容3</span>
    <span title="twoone">文字内容4</span>
    <div>文字内容5</div>
</body>
</html>
  • 后代选择器
    • 包括直接\间接子元素
    • !!!p里面不能嵌套div元素,会出问题,div一般可以都嵌套,但是p一般包含文本元素
<!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>
            /* 选择div元素里面的span元素,!!!中间是空格*/
            /* 1.span是div的子元素,其中是包含直接子元素和后代子元素 */
            /* div span {
                background-color: #f0f;
            } */
​
            /* 2.子选择器,子选择器会层叠父选择器,!!!中间是> */
            /* div>span {
                background-color: #ff0;
            } */
​
            /* 3.除了标签,后代选择器和子选择器都可以应用到类上 */
            /* 后代选择器 */
            /* .box2 span {
                background-color: #f00;
            } */
​
            /* 子代选择器 */
            .box2>span {
                background-color: #f0f;
            }
    </style>
</head>
<body>
    <span class="box1">文字内容1</span>
    <div class="box2">
        <span class="box3">文字内容2</span>
        <p class="box4">
            <span class="box5">文字内容3</span>
        </p>
    </div>
    <div class="box2">
        <span class="box6">文字内容4</span>
    </div>
    <span>文字内容5</span>
</body>
</html>
  • 子代选择器>
    • 只包括直接子元素
    • span是个行内元素, div是个block元素
  • 相邻兄弟选择器
    • 只能是!!!紧挨着!!!的兄弟元素
<!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>
        /* 相邻兄弟选择器 */
        /* 必须是紧挨在后面的兄弟,!!!符号是+ */
        div+p {
            background-color: #f00;
        }
​
        /* 全兄弟选择器 */
        /* 不用紧挨着,只要是在后面的兄弟就可以 !!!符号是~ */
        div~p {
            font-weight: bold;
        } 
    </style>
</head>
<body>
    <p>文字内容1</p>
    <div>
        <!-- 文字内容2不是兄弟,是父子 -->
        <p>文字内容2</p>
    </div>
    <p>文字内容3</p>
    <p>文字内容4</p>
</body>
</html>
  • 全兄弟选择器
    • 不需要是紧挨着的兄弟元素,只要求是兄弟元素
  • 交集和并集选择器

    • 交集

      既要符合A又要符合B

    • 并集

      • A,B只要符合其中一个就会选择

image.png

```
<!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>
        /* 交际选择器,选中文字内容1 */
        div.one[title="other"] {
            background-color: #0ff;
        }
​
        /* 如果先被交际选择器选中,后期使用并集选择器泽不出出现样式效果 */
        
        /* 并集选择器, */
        div,.one,[title="other"] {
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="one">文字内容1</div>
    <div class="one" title="text1">文字内容2</div>
    <div class="one" title="other">文字内容3</div>
    <p class="one "> 文字内容4</p>
</body>
</html>
```
属性选择器后代选择器子选择器相邻兄弟选择器全兄弟选择器交集选择器并集选择器
[属性名="属性值"] [属性名*=属性值] [属性名^=属性值] [属性名$=属性值]空格+~紧挨,

这些选择器可以标签和属性和类夹杂使用

十一. 补充

1.不要用标签取名class
2. 中划线叫做连字符
3.link中的rel不能省略,确定rel,相应的type也会默认确定,此时type可以省略
4. .org:非盈利组织
avatar
文章
阅读
粉丝