day6——css3

电玩女神 2021-11-22 11:26 309阅读 0赞

#### 一.css选择器 ####

###### 1. 考虑浏览器是否支持（谷歌和苹果所有样式都支持） ######

###### 2. 元素选择器：\*通配符，`E F`包含选择器，`E>F` 父子选择器，`E+F`:相邻选择器:紧贴在E元素后的F元素，`E~F`：兄弟选择器 ######

E~F：E元素后的所有兄弟元素F（**不包括E元素**）

###### 3. 伪类选择器：E:link, E:hover, E:foucs（获得焦点时触发） ######

###### 4. 属性选择器 ######

![在这里插入图片描述][20190724215138715.png]  
![在这里插入图片描述][20190724215338186.png]  
`E[att ~=”value”]`——p中有value属性且至少有一个空格的元素;  
![在这里插入图片描述][20190724215400825.png]  
`E[att$=”val”]:after{content:url(images/rar.jpg)}`:找到符合条件的元素后在后面添加上选用的图片

###### 5. 伪对象选择器 ######

单冒号和双冒号效果相同，进化而来，目前css3使用双冒号  
E:before,E:after必须和content搭配使用  
eg:  
![在这里插入图片描述][20190724215451731.png]  
实例:百度文库侧边栏练习  
![在这里插入图片描述][20190724222729569.png]  
核心代码如下

结构如下：

<body>
    <a href="aaa.doc">文档文件</a>
    <a href="aaa.rar">压缩文档</a>
    <a href="aaa.mov">视频文档</a>
    <a href="aaa.excel">表格文档</a>
    <a href="aaa.ppt">ppt文档</a>
    <a href="aaa.txt">文本文档</a>
    <a href="aaa.web">web文档</a>
    <span>123456</span>
    </body>

E:selection:元素被选中时触发样式

###### 6. 结构伪类选择器 ######

*  child类型——在子元素里寻找  
    `e:first-child`:第一个子元素  
    e——div分区或body中第一个子元素是不是e标签,若是则符合条件  
    `e:last-child；`最后一个子元素  
    `e:nth-child`(数字/odd/even/3n+1)：数字从1开始的第某个元素/奇数行/偶数行/某个自定义公式：n从0开始  
    `e:only-child`:某分区里仅含唯一一个子元素e
 *  type类型  
    ![在这里插入图片描述][20190724224822118.png]
 *  `e:root`:根元素

###### 7. ui状态伪类选择器——在表单元素中的功能 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
eg：css选择器文件夹  
样式如下:  
(input的默认状态具有 enabled属性)

body部分如下：

<form method="post" action="#">
    		<fieldset>
    			<legend>disabled和enabled</legend>
    			<ul>
    				<li>
    					<label>
    						<input type="text" name="id" value="99" disabled /><span>ID</span>
    					</label>
    				</li>
    				<li>
    					<label>
    						<input type="text" name="user" value=""  />
    						
    						<span>昵称</span>
    					</label>
    				</li>
    				<li>
    					<label>
    						<input type="text" name="pwd" value="" enabled />
    						<span>密码</span>
    					</label>
    				</li>
    			</ul>
    		</fieldset>
    		<fieldset>
    			<legend>选中下面的项试试(单选按钮)</legend>
    			<ul>
    				<li><label><input type="radio" name="sex" value="0" /><span>蓝色</span></label></li>
    				<li><label><input type="radio" name="sex" value="1" /><span>红色</span></label></li>
    				<li><label><input type="radio" name="sex" value="2" /><span>黑色</span></label></li>
    			</ul>
    		</fieldset>
    		<fieldset>
    			<legend>选中下面的项试试(多选按钮)</legend>
    			<ul>
    				<li><label><input type="checkbox" name="like" value="0" /><span>蓝色</span></label></li>
    				<li><label><input type="checkbox" name="like" value="1" /><span>红色</span></label></li>
    				<li><label><input type="checkbox" name="like" value="2" checked /><span>黑色</span></label></li>
    			</ul>
    		</fieldset>
    		</form>

效果如图：

![id不能由用户输入，昵称栏默认可选，密码为enable可选][id_enable]  
id不能由用户输入，昵称栏默认可选，密码为enable可选，单选按钮选中后背景变为红色，多选按钮默认黑色已选中

#### 二.边框 ####

1.  圆角:border-radius
2.  阴影：

*  `box-shadow:h-shadow v-shadow blur spread color inset`

属性含义：水平阴影，垂直阴影，阴影模糊距离，阴影模糊程度（宽度），阴影颜色，内置（不设置时默认为外置）

*  `text-shadow: h-shadow v-shadow blur color`

文本阴影属性含义：水平位置，垂直位置，阴影模糊距离，阴影颜色

1.  border-image(不支持ie浏览器)

border-image: source slice width outset repeat;

属性含义：图像源路径，边界向内偏移 ，图像边界宽度，用于指定在边框外部绘制，border-image-area 的量，是否重复（3值）  
是否应重复（repeat）、拉伸（stretch）或铺满（round）

div
            {
                border:10px solid transparent;
                width:40px;
                padding:5px 10px;
                -moz-border-image: url(../images/button.png) 0 14 stretch;
                -webkit-border-image: url(../images/button.png)0 14 stretch;
                -o-border-image: url(../images/button.png)  0 14 stretch;
                border-image: url(../images/button.png) 0 14 stretch;
            }

#### 三.背景 ####

**多背景background-image——要注意图层放的顺序会影响最后的效果（最前面的在最上面）**

*  `background-size`(背景图像大小)：两种方法-精确像素大小或者百分比调整（1个值为占总体，两个值为水平方向和竖直方向）  
    ![在这里插入图片描述][20190725180505702.png]
 *  `background-repeat` ：repeat或no-repeat  
    ![在这里插入图片描述][20190725174040749.png]
 *  `background-origin`（背景定位位置）:border-box从边框线开始填充,padding-box：从内边界开始填充,content-box：从内容开始填充  
    ![在这里插入图片描述][20190725175257982.png]
 *  `background-clip`:背景被裁剪到边框盒,背景被裁剪到内边距框,背景被裁剪到内容框：border-box,padding-box,content-box  
    ![在这里插入图片描述][20190725175338638.png]  
    eg:新年快乐.html

#### 四.渐变 ####

##### 1.线性渐变 #####

*  线性渐变-从上至下:

渐进增强——先写各个内核  
优雅降级——先写标准形式  
eg:渐进增强：  
\-webkit-linear-gradient(颜色块，颜色块)  
\-o-linear-gradient(颜色块，颜色块)  
\-moz-linear-gradient(颜色块，颜色块)  
linear-gradient(颜色块，颜色块)

*  线性渐变-从左至右：

谷歌为从左边开始，记录起始位置，o朋和火狐为表明终点位置，标准写法为to+目的方向  
![在这里插入图片描述][20190725180558796.png]

*  线性渐变-任意角度：
    
        linear-gradient(180deg,color1,color2…)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

*  线性渐变-左上至右下（或其他）：

eg:

-webkit-linear-gradient(left top，red,blue)
    -o-linear-gradient(right bottom, red,blue)
    -moz-linear-gradient(right bottom, red,blue)
    linear-gradient(to right bottom, red,blue)

*  线性渐变-多个颜色——均匀分布与不均匀分布

均匀分布时逐一添加颜色  
不均匀分布时百分比表示节点（两个颜色交叠）而不是长度

liner-gradient(颜色块，位置点，颜色块，位置点)  
eg: `-webkit-linear-gradient(red 20%,yellow 70%,green 90%)`

**透明度transparent或rgba(),其中a即第四个值通过0-1数值（小数写为.5的形式）控制透明度，0为完全透明  
白色为255，黑色为0，之间为灰色**

*  重复渐变:  
    渐变时如果没有给起始颜色，则绿色会循环到起始位置如图二  
    eg: `background:-webkit-repeating-linear-gradient(left,orange,yellow 10%,green 50%);`  
    ![在这里插入图片描述][20190725181139106.png]

.box6{/*重复渐变*/
               background:-webkit-repeating-linear-gradient(left,yellow 30%,green 50%);
               background:-o-repeating-linear-gradient(left,yellow 30%,green 50%);
               background:-moz-repeating-linear-gradient(left,yellow 30%,green 50%);
               background:repeating-linear-gradient(left,yellow 30%,green 50%);
           }

![在这里插入图片描述][20190725181831319.png]  
eg:jianbian.html

##### 2.径向渐变 #####

background: radial-gradient(center, shape size, start-color, ...,
           last-color);

center表示中心坐标位置，默认在中心点，可以用百分比或精确值表示中心坐标位置  
shape表示形状：circle 圆形 ellipse 表示椭圆形 默认为椭圆

*  大小: closest-side最近的边 farthest-side最远的边  
    closest-corner最近的角 farthest-corner最远的角  
    靠近他们的方向为均匀分布
 *  重复的径向渐变

eg:

background: -webkit-repeating-radial-gradient(red, yellow 30%, green 50%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-radial-gradient(red, yellow 30%, green 50%); /* Opera 11.6 - 12.0 */
    background: -moz-repeating-radial-gradient(red, yellow 30%, green 50%); /* Firefox 3.6 - 15 */
    background: repeating-radial-gradient(red, yellow 30%, green 50%); /* 标准的语法（必须放在最后） */

eg:径向渐变文件夹  
以上渐变时将四种支持形式全部写上以避免问题

#### 五.文本效果 ####

1.  属性：text-shadow，box-shadow, text-overflow,word-wrap,  
    word-break
2.  text-overflow:文本溢出  
    和white-space:nowrap;overflow:hidden一起使用才能产生效果
3.  word-wrap:强制换行
4.  word-break：非中日韩的文本换行

#### 六.CSS字体 ####

字体定义时首先建立style，然后在其中

@font-face{
    font-family:
    src:url()
    }

eg:

eg：字体.html

#### 七.CSS多列 ####

（按下tab键后会显示所有兼容的浏览器格式）  
column-count列数（根据文本字数划分）  
column-gap 列间距  
column-rule 间距分割线

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>多列</title>
        <style>
            p{
                -webkit-column-count: 10;
                -moz-column-count: 10;
                column-count: 10;
                -webkit-column-gap: 30px;
                -moz-column-gap: 30px;
                column-gap: 30px;
                -webkit-column-rule:solid 2px blue;
            }
        </style>
    </head>
    <body>
    <p>
        Phuket Island | 这里水色纯净、天色蔚蓝，有自成一派的浪漫，白色沙滩和碧绿海水是普吉岛最美的语言。恋上普吉岛，恋上那片幽幽的蓝。
    
    
        芭东海滩距普吉镇15公里，是普吉岛开发最完善的海滩区。白天的芭东海滩游人众多，吸引着越来越多的游客。喜欢逛街和购物的游客也很喜欢这里，因为在海滩附近有几条布满商店和餐馆的街道，走走看看间乐趣无穷。夜晚，度假村、露天酒吧、舞厅、夜总会人来人往。点一杯简单的饮料，在异国的夜晚和陌生的朋友聊聊天，看看外国人的夜生活，再吹一吹海风，真是非常享受。
    
    
    
    
        幻多奇乐园是普吉岛最受欢迎的旅游点。每晚幻多奇剧场都会表演精彩的节目，如歌舞、魔术、杂技以及大象表演，有英语和泰语讲解。这里以一座古老村落的形式出现，向游客展示泰国传统文化神秘的一面，尤其是最后十几头大象一起走到舞台上，气势十分壮观。 幻多奇乐园占地广阔，内有主题商业街、小吃摊、宫廷式餐厅及豪华的现代化大剧院。在这里不但能买到具有泰国特色的手工艺品，还能品尝到当地的特色佳肴及世界各国的风味美食。泰国人把它当作本土的迪士尼乐园。幻多奇剧场每晚都会表演精彩的节目，以讲故事的方式向游客展示泰国传统文化。
    
    
    
        皮皮岛位于泰国普吉岛东南约20公里处，是由两个主要岛屿（北部的大皮皮岛和南部的小皮皮岛）组成的姐妹岛，1983年被定为泰国国家公园。这是一个深受阳光眷宠的地方，柔软洁白的沙滩，宁静碧蓝的海水，鬼斧神工的天然洞穴，未受污染的自然风貌，使得她从普吉岛周围的30余个离岛中脱颖而出，一举成为近年来炙手可热的度假胜地之一。 喜欢宁静的人一定会喜欢皮皮岛的，花上几天在这里，一定会感受到人生最美好的感觉。如果是短暂、匆忙的一日游，虽然也可以看见属于皮皮岛的美景，可是很难彻底领略皮皮岛浪漫的风情，因为这里适合从容地居住和细心地体味。千万别吝啬你的假期，带上一本好书和一分好心情，出发吧！ 拉一把躺椅在海滩边享受温情脉脉的阳光，悠闲地翻几页书，啜一口色彩缤纷的鲜榨热带水果汁，偶尔发个呆，打个盹儿，也有连绵的海浪声依稀相伴，好不惬意；或许你热爱运动，那可一定要来这里一展身手！游泳、潜水、滑水、独木舟、风浪板、香蕉船……丰富多彩的水上、水下运动项目会让你手舞足蹈、无暇休息。当然也要注意动静相宜、张弛有道，激烈的运动后，不妨租个钓鱼杆，怡然自得地钓钓小鱼、小螃蟹之类，别太认真，愿者上钩嘛！ 爱好电影的朋友应该还记得2000年上映的由李奥纳多主演的美国热门影片《海滩》吧，但是你知道吗？那片梦幻般的碧海晴天正是在小皮皮岛实景拍摄的！能获得好莱坞大导演之青睐，可见皮皮岛真是魅力不凡。
    </p>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]

#### 八.CSS3用户界面 ####

1.  resize:调整尺寸  
    eg:多行文本框时定义了`resize：none,`  
    他的属性有：`none/both/vertical/horizontal`；//不能调整大小、都可以调整，可以调整高，可以调整宽，  
    `max-width,max-height`:定义可拉伸的额最大宽高；  
    `overflow:auto;`超出时出现下拉菜单  
    ![在这里插入图片描述][20190725184453423.png]
2.  `outline-offset`:属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

div
    {
    border:2px solid black;
    outline:2px solid red;  //超出部分为红色实线
    outline-offset:15px;//超出距离15像素
    }

效果如图：  
![在这里插入图片描述][20190725184936189.png]

#### 九.弹性盒子（Flex box） ####

页面适应不同的屏幕大小  
弹性容器Flex container +弹性子元素Flex item

display:-weblit-flex;
    justify content:flex-start;//给父元素

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]  
justify-content的属性:  
flex-start：  
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：  
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：  
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：  
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：  
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]

[20190724215138715.png]: /images/20211122/ac867f426dda4bc390b86825adff176f.png
[20190724215338186.png]: /images/20211122/665d2cfada684b70b39f3a60d80576d2.png
[20190724215400825.png]: /images/20211122/4c1b0ed4794440fb87ed934aac56dc96.png
[20190724215451731.png]: /images/20211122/58a51bd58de24288b8a335eac33a49f8.png
[20190724222729569.png]: /images/20211122/a14921f8ca444094833a75432fda3187.png
[20190724224822118.png]: /images/20211122/ef6574f16950401a8e4b79c75856d98f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20211122/1008153cc8c541fba7c91506d1b9f732.png
[id_enable]: /images/20211122/6586c82949974ad8b750bee3834bcc03.png
[20190725180505702.png]: /images/20211122/55d0f0ae88394df184141909d8ff2fbb.png
[20190725174040749.png]: /images/20211122/a3fdb041c719476aa857f114d0970d65.png
[20190725175257982.png]: /images/20211122/67b9e02c03ed43e98e3bc3429a322531.png
[20190725175338638.png]: /images/20211122/aa9fbff0970d48a1a88973de0835a6c0.png
[20190725180558796.png]: /images/20211122/b4338f4a143f4814b00208c237344a38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: /images/20211122/72c71d47fca74c21b84c7d072c8658a5.png
[20190725181139106.png]: /images/20211122/9af8881c67c14958891994213ba1fb71.png
[20190725181831319.png]: /images/20211122/9622f4a63cf74d0fbbb550b29e3c4a7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: /images/20211122/8cb47be1962e4110a1dd22b59ec3dd88.png
[20190725184453423.png]: /images/20211122/0aa1b7735f0d427eae870d4253e253f0.png
[20190725184936189.png]: /images/20211122/793edb0220f64b3e97053f4e430108e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: /images/20211122/7b121766758a4a40b82e09d4670be86d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]: /images/20211122/cdc991f039b841268ffb1ead3525c911.png