学习笔记~ 1.1CSS基础

最新推荐文章于 2024-08-21 15:33:15 发布

zeddme

最新推荐文章于 2024-08-21 15:33:15 发布

阅读量252

点赞数 1

分类专栏： HTML及CSS 文章标签： html css web

本文链接：https://blog.csdn.net/qq_44888570/article/details/108809403

版权

HTML及CSS 专栏收录该内容

11 篇文章 12 订阅

订阅专栏

1.1 CSS基础

笔者为正在学习web前端开发基础的菜鸟，计划先学习祖传三大件：HTML CSS及JS。写博客主要是为了加深记忆，以及把自己所学分享。本博客的内容主要为学习笔记，由于自学，其中我会借鉴网课老师课堂笔记再加入一些自己的见解，同时会分享一些学习过程中遇到的问题和解决方法。

正文

1.CSS:层叠样式表，用来美化网页的。做到结构（HTML）和表现（CSS）分离。
2.基本语法：
选择器 {
属性: 属性值;
}
3.CSS引用方式：行间样式、内部样式、外部样式、导入外部样式。
行间样式：直接在标签上书写样式。
内部样式：在文件的内部书写样式。写在head里

        <style type="text/css">
            样式内容
        </style>

外部样式：（1）先创建一个CSS文件；（2）再用link标签引入这个文件。
导入外部样式：（1）先创建一个CSS文件；（2）在style标签中用import导入这个样式文件。

以上四种CSS引用方式的区别：
    行间样式只作用于当前标签；而内部样式作用于当前文件；外部样式可以被多个HTML文件引用。
    在实际项目开发中，最好使用外部样式。
    外部样式分为link引入和import引入两种方式。这两种方式区别：
        1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
        2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
        3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
        4）link支持使用Javascript控制DOM去改变样式；而@import不支持。

4.CSS选择器分类：
1）*：匹配html中所有元素（注意：*的性能差，因为它要匹配所有元素，所以在开发时，不建议使用）
2）标签选择器：用来匹配对应的标签
3）类选择器：用来选择class命名的标签
4）ID选择器：用来选择用id命名的标签
5）派出选择器：根据上下文来确定选择的标签
6）伪类选择器
7）伪元素选择器
5.选择器的分组
让多个选择器（元素）具有相同的样式，一般用于设置公共样式。
6.选择器的继承
子元素可以继承父元素的样式，反之不可以。
7.样式权重
!important(10000)>内联样式(1000)>id选择器(100)>类、伪类和伪元素选择器(10)>标签选择器(1)

8.CSS字体
1)font-size:字号(px/%)
2)font-family:字体
3)font-style:文字样式(normal/italic/oblique)
4)font-weight:文字加粗(normal/bold/bolder/lighter/100-900)
5)line-height:行高(px/数字/em等)
6)color:文字的颜色(颜色的单词/rgb()->r:0-255,g:0-255,b-0-255/16进制(以#开头，后跟6位(#rrggbb)或3位(#rgb)16进制数）
7)text-decoration:文字修饰(none/underline/overline/line-through)
8)text-align:文本对齐方式(left/right/center)
9)text-transform:字母大小写(capitalize/uppercase/lowercase/none)
10)text-indent:文本缩进(px/em/%/pt等)

Tip:
    font复合属性：
        font:font-style font-variant font-weight font-size/line-height font-family;
        注意：
            1）属性值的位置顺序
            2）除了font-size和font-family之外，其它任何一个属性值都可以省略
            3）font-variant：normal/small-caps（让大写字母变得小一些）

9.CSS背景
1)background-color:背景色(transparent/color)
2)background-image:背景图(none/url)
3)background-repeat:背景图像铺排方式(repeat/no-repeat/repeat-x/repeat-y)
4)background-position:设置对象的背景图像位置({x-number | top | center | bottom } {y-number | left | center | right })
5)background-attachment:背景图像滚动位置(scroll/fixed)
6)background:设置背景的复合写法
background: color image repeat attachment position
10.CSS伪类选择器
伪类：专门用来表示元素的一种特殊状态。
常用伪类选择器：
1)a标签的伪类：
:link/:visited/:hover/:active
2):focus 获得焦点
3):first-child/:last-child/:nth-child(number)
11.属性选择器
[属性名]:包含有指定属性名的元素（常用）
[属性名=值]:属性名的值为指定值的元素（常用）
[属性名~=值]:属性名的值包含指定值的元素
[属性名^=值]:属性名的值以指定值的开头的元素
[属性名$=值]:属性名的值以指定值的结尾的元素
12.关系选择器
1)空格：后代选择器
2)>：只选择儿子元素
3)+：兄弟选择
13.CSS伪元素
1）CSS伪元素与伪类区别：
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。

    伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
    它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

    伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，
    并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

2）伪元素&伪类的特点：
    伪元素和伪类都不会出现在源文档或者文档树中
    伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
    伪元素名和伪类名都是大小写不敏感的
    有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）

3）:before/:after/:first-letter/:first-line : 前面可以是1个冒号也可以是双冒号
    ::selection/::placeholder/::backdrop : 前面只能是双冒号

总结

本次内容为CSS基础样式格式，很为重要，需要多加练习。下图为利用本次所学做出网页的效果图

效果图

源码

HTML布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实训1</title>
    <link rel="stylesheet" href="ex3_1.css">
</head>
<body>
    <!--开发思路：先整体，再局部；从上至下开发。-->
    <div class="wrapper">
        <h1>致那些终将流行的响应式网页设计</h1>
        <p><span class="summary">摘要: </span>2013年，轮到我们国内的设计师和工程师们大展身手，推动响应式设计的时候了。亲们，请取长补短，让自己做出来的网站也有响应式的magic吧!</p>
        <p>如今，web应用已经深入到我们生活的方方面面了。而你知道吗?72%的用户们都希望他们访问的网站不仅在台式机或笔记本上有赏心悦目的界面，同时也能适应移动设备的屏幕。为此，身为设计师和工程师的我们必须紧抓这个潮流，走在前沿。达尔文教给世人最精准的四个字就是：适者生存。而响应式设计，凭借着其灵活可变的特性以及一些其他因素，必定会被越来越多的设计师青睐，成为未来web开发的一大主流设计模式。</p>
        <p>Ethan Marcotte，致力于推广响应式设计的先驱者，指出响应式设计基本上包括三大元素：流体网格，自适应的媒体以及CSS3媒体查询。简言之，响应式设计是一种自适应的设计模式，能灵活地应对不同显示设备的分辨率大小，像台式机，笔记本电脑，手机，平板电脑，平板手机，电子书等。</p>
        <p>然而实现响应式设计并不是一件简单的事。Web设计师和工程师们常常面临着网站性能(主要是加载速度)，广告，导航等多方面的挑战。不过这些挑战是设计过程中无可避免的一部分，也必将令响应式设计真正地变得赏心悦目和持久稳定。</p>
        <p>可以看到的是，许多网站都已纷纷投向了响应式设计的怀抱。下面我们不妨看看一些将响应式设计实际融入到网页中的优秀作品吧。</p>
        <p>在此之前，容我向您推荐一些响应式设计相关的法宝和干货：</p>
        <ul>
            <li><a href="#">灵活性: 响应式网页设计的基础</a></li>
            <li><a href="#">响应式设计的未来——Flexbox</a></li>
            <li><a href="#">用于响应式设计的9个CSS技巧</a></li>
            <li><a href="#">16个帮助你高效测试响应式设计界面的工具</a></li>
        </ul>
    </div>
</body>
</html>

CSS样式：

* {/*样式初始化*/
    margin: 0;
    padding: 0;
}
body {
    padding: 10px 0;
    font-family: 微软雅黑;
}
.wrapper{
    width: 640px;
    border: 1px solid #ccc;
    padding: 20px;
    margin: 0 auto; /*左右居中*/
}
h1 {
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    margin: 10px 0 20px;/*上边距为10px，左右为0，下边距为20px*/
}
p {
    font-size: 14.7px;
    text-indent: 2em;
    margin: 1.5em 0; /*上下边距为1.5个字符距离，左右为0*/
    line-height: 1.5em;
}
h1+p {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    text-indent: 0;
    color: #005fbd;
    font-size: 12px;
}
.summary {
    color: #ff0000;
}
ul{
    list-style-type: none; /* 取消列表前的点 */
    text-indent: 2em;
    font-size: 12px;
}
ul li {
    line-height: 2em;
}
a {
    color: #666;
    text-decoration: none; /*取消a标签的下划线*/
}
a:hover {
    color: #000;
    text-decoration: underline;
}