sdau启航第二次作业

笔记：

Css在style标签下

选择器{样式}

给谁改样式{什么样式}

Color改变颜色font-size更改字体大小

Css主要由两部分组成选择器以及一条或多条声明

属性与属性之间要用：分割结尾用；

1.Css、样式格式代码风格：

展开型书写用小写字母书写属性值前面，冒号后面保留一个空格；选择器后面保留一个空格

2.选择器：

选择某个标签由基础选择器和复合选择器组成

标签选择器：选择标签名不可选择单个标签只能选择全部

类选择器：.名字后面跟大括号内部设置样式在结构内部可以在标签内调用

            .aquamarine{

               

                width: 100px;

                height: 100px;

                background-color: aquamarine;

            }

多类名class双引号内部有多个类名

<div class="green width">你好div>

类名中间必须有空格

节省代码量

Id选择器 样式用#定义，结构id调用，只能调用一次

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

            #blue{

                font-size: 30px;

                color:beige;

            }

通配符选择器：

把所有标签全部修改样式；一般没有市场

3.字体属性：

Css用font-family属性定义的文本系列：

各种字体之间用空格隔开；一般情况下如果有多个单词组成的字体加引号

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

尽量使用系统默认字体

一般给body改字体

Generic family	字体系列	说明
Serif	Times New Roman Georgia	Serif字体中字符在行的末端拥有额外的装饰
Sans-serif	Arial Verdana	"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace	Courier New Lucida Console	所有的等宽字符具有相同的宽度

Font-size定义文字大小不同浏览器一般默认字号不一致所以一般指定值

可以给body标签指定文字大小

字体粗细属性

Font-weight

normal： 正常的字体。相当于数字值400

bold： 粗体。相当于数字值700。

bolder： 定义比继承值更重的值

lighter： 定义比继承值更轻的值

： 用数字表示文本字

实际开发主要使用数字与strong具有相似的效果

Font-style设置文字样式一般主要用于让em标签变得不倾斜

符合属性：简写的方式

Font：font-style font-weight font-size/line-weight font-family

不可以改变属性必须保留font-size和font-family

            #font{

                font-size: 80px;

                color:beige;

                font-family: '行楷', '楷体', serif;

                font-weight: 600;

                font-style: inherit;

                font: italic 500 70px '楷体'

            }

4.css文本属性

可以用自定义属性用#十六进制数字来代替字母

例如#ff0000代替红色一般用吸管吸取

用rgb格式三原色格式red blue green

平时用最多的为16进制

Text-align水平对齐文本的方式

left左对齐默认值right右对齐center居中对齐       

是在盒子内的文字对齐的方式不是盒子的对齐方式

装饰文本

划线在文字上中下的线用text-decoration

线与字体颜色相同可以另外设置颜色

主要用于去掉网址中的下划线

文本缩进：text-indent 像素值

文本内的首行缩进直接写缩进距离

距离单位主要为em是一个相对值相对于文字的大小进行缩进

行间距：控制行与行之间的距离line-height

是文字与上下盒子边界距离

             div{

                text-align: center;

                text-decoration: overline;

                text-indent: 20px;

            }

            p{

                line-height: 2em;

            }

            a{

                text-decoration: none;

            }

5.css的引入方式

Css三种样式表

嵌入式

内部样式表包含在代码的内部

理论可以写在任何位置方便控制整个页面的元素样式

行内样式表

可以直接在标签内部写style简单修改标签

Style=“color：pink”

使用较少

外部样式表：

通常使用外部样式表新建一个后缀为.css文件把所有style然后再引入

Css内部不需要标签

文件路径”>

同文件路径可以直接写文件名

1.复合选择器

写多个标签用乘法div*10

基本选择器构成的组合

1.2后代选择器

更好的选择标签

父辈标签 子辈标签括号内形式

更改父辈标签里子辈标签的形式

选择器选择后代全部的标签

Div div{color:blue}

1.3子元素选择器

.hot>a

只选择相近的一代不选择后代

1.4并集选择器

中间用，隔开

div,

ol{

    color:  aquamarine;

}

1.5伪类选择器

用于鼠标放置改变颜色

最大特点用：表示

链接伪类：主要给链接使用

a:link选择所有未被访问的链接

a:visited选择所有已被访问的链接即使重新运行程序也不会发生改变

a:hover选择鼠标指针位于其上的链接

a:active选择活动链接（鼠标按下未d起的链接）

声明顺序不可以颠倒lvha

链接伪类的经常写法只写hover

1.7:focus伪类选择器

用于选取获得焦点的表单元素

选择之后更改样式可以更改里面的元素

input:focus{

    background-color: #564;

}

2.css元素显示模式

2.1元素显示模式：根据特点不同布局网页，元素以什么方式显示

分为块元素和行元素

块元素自己独占一片区域不可进入

比如div如果没有宽度则默认未百分百

文字标签里面不可以放块元素比如

等等不可以放div

2.2行内元素

等等

相邻行元素在一行上一行可以放置多个元素

宽度默认宽度是文字宽度

直接设置宽度无效；行内元素只可放行内元素或文本

特殊情况里面可以放块级元素但是给转换一下块级模式最安全

2.3行内块元素

图片表单和单元格

默认宽度未本身宽度高度行高和边距都可以控制

2.5元素显示模式

增加的触发范围

转换为块元素display: block

具有块级元素特点

同样可以反过来把行级元素转换为块级元素display:inline

转换为行内块元素display:inline-block

可以同时使用

让文字的行高等于盒子的高就可以让文字在当前盒子中垂直居中

none：

隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：

指定对象为内联元素。

block：

指定对象为块元素。

list-item：

指定对象为列表项目。

inline-block：

指定对象为内联块元素。（CSS2）

table：

指定对象作为块元素级的表格。类同于html标签

（CSS2）

inline-table：

指定对象作为内联元素级的表格。类同于html标签

（CSS2）

table-caption：

指定对象作为表格标题。类同于html标签

（CSS2）

table-row-group：

指定对象作为表格行组。类同于html标签

（CSS2

a{

    color: rgb(80, 43, 43);

    text-decoration: none;

    background-color: rgb(165, 227, 102);

    width: 40px;height: 30px;

    display: block;

}

3.css的背景

3.1背景颜色

一般情况下设置为transparent透明色

3.2背景图片

background-image：none|url

通常为logo或者小图片或大图片

背景图片容易控制主要使用同一文件夹里面的图片便于控制

3.3背景平铺

让背景图像不影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性:

不平铺就是不重复

repeat-x,y,z分别在x,y,z轴上平铺

页面元素可以加背景图片以及背景颜色

3.4背景图片位置

通过backg-position：x y；

可以使用方位名词或精确单位

top center right left  top

方位名词顺序无前后之分可以在盒子中随意控制

如果致谢一个方位名词另一个值省略则第二个默认值居中对齐

用精确值的话如果只指定一个坐标则必须为x另一个默认居中

可以混合使用精确单位与方位名词x，y坐标不可反向

3.5背景图像固定（背景附着）

background-attachment：scroll | fixed

可以制作滚动视差

.back{

    color: aqua;

    color: rgb(128, 197, 59);

    height: 200px;

    background-image: url(link.png);

    background-repeat:repeat-x;

    background-position: 500px 99px;

}

css三大特性

1.1样式冲突时就近原则

样式不冲突不会层叠

1.2继承性

子标签内的样式会继承为父标签

继承主要是继承文字相关和颜色

行高的继承：

会继承行高

body{

    font: 12px/1.5;

}

行高是文字大小的1.5倍

1.3优先级

根据权重实现优先级

权重的叠加

css盒子模型

网页模型三大核心盒子模型、浮动、定位

1.2盒子模型组成

边距外边距内边距和实际内容

border边框 content内容 padding 内边距 margin 盒子间距

1.3border可以设置边框

边框有三部分组成宽度样式和颜色

border-width||border-style||border-color

： 定义元素的边框厚度。

： 定义元素的边框样式。

： 定义元素的边框颜色。

none： 无轮廓。当定义了该值时，border-color将被忽略，border-width计算值为0，除非边框轮廓应用了border-image。

hidden： 隐藏边框。

dotted： 点状轮廓。

dashed： 虚线轮廓。

solid： 实线轮廓

double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值

groove： 3D凹槽轮廓。

ridge： 3D凸槽轮廓。

inset： 3D凹边轮廓。

outset： 3D凸边轮廓。

边框的符合写法border ：5px double blue

同时也可以分开写border-top、border-bottom——

1.4表格的细线边框

border-collapse：collapse：表示相邻边框合并在一起

不会增加像素宽度

1.5边框会影响盒子的实际大小

测量盒子大小的时候不量边框

如果包含了边框需要width/height减去边框宽度

1.6内边距

padding用于设置内边距

padding-right——等等设置各边边距

padding会影响实际大小 如果本身就有大小则需要计算大小

如果盒子内字数不一样多可以用padding让盒子看的差不多

如果盒子没有大小则不会撑开盒子大小

table{

    text-align: center;

}

td{

    padding-left: 14px;

    padding-top: 7px;

    padding-right: 8.2px;

}

1盒子模型外边距

margin-left——用于设置上下左右的外边距

外边距可以让块级盒子水平居中但必须满足条件

盒子必须指定宽度盒子左右边距都设置为auto

margin：0 auto

上下是零左右居中

让行内元素或行内块元素水平居中：给其添加text-align：center即可

嵌套块元素会导致垂直边距塌陷

父元素内子元素有上外边距则父元素会继承子元素的边距导致其合并

解决方案1、可以为父元素定义上边框2、给父元素定义上内边距

为父元素添加overflow：hidden

清除盒子的内外边距

1通配符选择器直接清除内外边距这也是css第一行代码

行内元素为了兼容性尽量只设置左右内外编剧不要设置上下内外边距

2.ps的基本 *** 作

ctrl+r打开标尺测量

然后是这次作业样式图：

 再放张对比图

还是有些不一样一些特殊字符没有找到

之后是html代码

 

（CSS2）

table-cell：

指定对象作为表格单元格。类同于html标签

（CSS2） table-row： 指定对象作为表格行。类同于html标签

新闻

hao123

地图

贴吧

视频

图片

网盘

更多

设置

登录

百度一下

百度热搜 > ↺ 换一换

↑	中央向实际种粮农民发100亿元补贴	3	袁隆平院士逝世一周年	热
1	北京增本土感染者94例 社会面17例	4	是否会反攻俄领土?泽连斯基回应
2	武汉、南京楼市新政紧急叫停背后	5	山东一废品站发现康熙年间红衣大炮

然后是css代码

.small{
    font-size: px;
}
table{
    text-align: center;
}
td{

    padding-top: 7px;
    padding-right: 8.2px;
    padding-left: 14px;
}
.font {
    font: 13px/23px Arial,sans-serif;
    font-size: 13px;
    line-height: 25px;
    color: #000;
    font-family: Arial, sans-serif;
    text-decoration: none;
    tab-size: 4;
    display: inline-block;
}
a.ex1:hover{
            color: #315efb;
}
a.ex2:hover{
    background-color: #315efb;
}
a.ex3:hover{
    color: #315efb;
    text-decoration:underline;
}
.turn{
    display: inline;
}
.right {
    padding-left: 1182px;
}
.wideth{
    width: 70px;
    text-align: center;
}
.righttop{
    padding-left: 40px;
    padding-top: 7px;
}
.s-topstyle
{
    height: 24px;
    width: 48px;
    line-height: 24px;
    display: inline-block;
}
.topstyle
{
    display: inline-block;
    font-size: 13px;
    text-decoration: none;
    background-color: #4e6ef2;
    color: #fff;
    overflow: hidden;
    font-family: inherit;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    outline: 0;
    border: 0;
    height: 23px;
    width: 50px;
    line-height: 23px;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}
.back{
    padding-top: 100px;
    background-image: url(logo.png);
    background-position: center 27px;
    background-repeat: no-repeat;
    height: 71px;
    background-size: 270px;
}
.input{
    width: 512px;
    height: 17px;
    border-radius: 10px 0 0 10px;
    border: 2px solid #c4c7ce;
    background: #fff;
    color: rgb(100, 99, 99);
    padding: 12px 16px;
    font-size: 16px;
    margin: 0;
    border-right: none;
}
.po{
    background: #fff url(http://www.kaotop.com/file/tupian/20220523/nicon-10750f3f7d.png) no-repeat;
    width: 24px;
    height: 18px;
    background-size: 24px;
    background-position: 0 -50px;
    right: 660px;
    position: absolute;
    margin-top: -32px;
}
.btn{
    cursor: pointer;
    width: 108px;
    height: 44px;
    line-height: 45px;
    line-height: 44px;
    padding: 0;
    background: 0 0;
    background-color: #4e6ef2;
    border-radius: 0 10px 10px 0;
    font-size: 17px;
    color: #fff;
    box-shadow: none;
    font-weight: 400;
    border: none;
    outline: 0;
}
.f{
    float: left;
}
.tran{
    padding-left: 535px;
}
.title{
    padding-left: 538px;
    padding-top: 48px;
}
.re {
    font-size: 14.5px;
    text-decoration: none;
    color: #222;
    font-weight: 700;
}
.co{
     color: #9195a3; 
     font-size: 16px;
     text-decoration: none;
}
.h{
    font-size: 14px;
    line-height: 14px;
    color: #626675;
    margin-left: 2px;
    text-decoration: none;
}
.h1{
    font-size: 14px;
    line-height: 14px;
    color: #626675;
    margin-left: 2px;
    text-decoration: none;
    font-size: 16px;
    padding-left: 510px;
}
.ri{
    padding-left: 530px;
    width: 20px;
    font-size: 16px;
    display: inline-block;
    text-align: center;
    font-weight: 500;
}
.ri2{
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}
.ri3{
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    width: 200px;
}
.wid{
    font-size: 16px;
    margin-left : -30px;
    text-align: left;
    text-decoration: none;
    color: #000;
    width: 200px;
}
.wid2{
    font-size: 16px;
    padding-left: 10px;
    padding-right: 0;
    text-align: left;
    text-decoration: none;
    color: #000;
}
.wid3{
    width: 14px;

}
.hot{
    text-align: center;
    margin-left: 6px;
    position: relative;
    top: 0px;
    width: 8px;
    background-color: #f60;
    background-size: 8px 5px;
    display: inline-block;
    padding-left: 0;
    padding-top: 4px;
    padding-right: 6px;
    vertical-align: middle;
    font-style: normal;
    color: #fff;
    overflow: hidden;
    line-height: 12px;
    height: 12px;
    font-size: 12px;
    border-radius: 4px;
    font-weight: 200;
    margin-top: 8.5px;
}
.sou{
    text-decoration: none; color: #000;
    margin-left: -10px;
}
.bl{
    display: inline-block;
}

以上