css

番茄西红柿发布于2019-04-23 13:25 / 2861人阅读

摘要：一选择器注释注释内容与的结合方式的引用直接在标签中引用在头部采用选择器加属性的方式引用在文件中以后常用在头部用选择器加属性引用引用标签引用指定的文件指的是引用的类型表示引用路径直接在标签中引用选择器加属性文

　一 , css选择器

　　1, css注释

　　　　/*注释内容*/

　　2, HTML与css的结合方式 (css的引用)

　　　1 , 直接在标签中引用;

　　　2, 在头部采用选择器加属性的方式引用;

　　　3, 在css文件中(以后常用)

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d2 {color : red} 
    style>
    <link rel="stylesheet" href="引用.css"> 
head>
<body>
<div id="d1" style="color:green">直接在标签中引用div>
<div id="d2" >选择器加属性div>
<div id="d3">css文件div>
body>
html>

#d3 {color:red}

　HTML用来完成页面的整体结构框架,CSS则是对这些结构或框架进行渲染,使他们更加丰满,JS则是让页面

　　更加生动,鲜活起来.

　　而css中的选择器就是选中将要进行渲染操作HTML结构的一种方式,它的作用就是选中目标.

　　3, 基本选择器(找标签的基本方式)

　　　元素选择器

　　　　根据标签的名字找

　　　　标签名 {属性}　　div {}

　　　ID选择器

　　　　#id名 {属性}　　#d1 {}

　　　类选择器

　　　　.类名 {属性} 　　.c1 {}

　　　　样式类名不要用数字开头,有的浏览器不认,常用数字字母开头 ;

　　　　标签中的class属性如果有多个,要用空格分开

　　　通用选择器

　　　　* { 属性;}　　表示操作body标签下的所有标签

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>找标签方式title>
    <style>
        p {color:red} 

    style>
    <style>
        #p2 {color:green} 
    style>
    <style>
        .类选择 {color: yellow} 
    style>

head>
<body>
<div class="类 类选择">类样式标识div>
<div id="p2">ID标识div>
<div class="类 类选择">类样式标识div>

<p>p标签p>
<p>p标签p>

body>
html>

　　4, 组合选择器

　　　后代选择器

　　　　父标签后代标签 {属性} div span {}

　　　　操作父标签嵌套下的所有与 "后代标签" 名字相同的的后代标签




    
    Title
    



选择器加属性
    儿子标签   
    
        孙子标签   
    

css文件

　　儿子选择器　　父标签>儿子标签 {属性}

　　对所有标签名为 "父标签" 嵌套下的 "儿子标签" 进行操作.如果"儿子标签" 下仍有嵌套的标签,也包括




    
    Title
    



选择器加属性
    儿子标签   
                      
        span孙子标签   
        div孙子
        
    
    
        
            孙子标签
        
    



css文件

　　毗邻选择器　　标签名+标签名(毗邻标签) {属性}

　　　　选中的毗邻标签只能是在相邻标签的后面的一个,不能是前面,因为程序从上到下执行,不会返回选中.




    
    Title
    



上面的div

        
            孙子标签
        


下面的div

　　弟弟标签　　标签名~同级标签名 {属性}

　　　　操作标签名后面的所有同一级的相同名称的标签




    
    Title
    



上面的div

        
            孙子标签
        

紧挨着
隔一个
下面的div
隔了一个不同名的   

                           
        弟弟标签下的儿子标签

　　属性选择器　　标签 [标签属性] {属性}

　　　　只操作该标签内与 [标签属性名=标签属性值] 组成的键值对相同的标签




    
    Title
    



属性标签

    嵌套中的属性标签
    嵌套中的属性标签属性不一样

　　不常用选择器

　　分组选择器　选择器,选择器 {属性}

　　当一个或多个选择器对元素操作相同属性时,可以把多个选择器写在一起,用逗号隔开.




    
    Title
    



div最外层
   
input最外层   

    input嵌套    
    input嵌套名称不一样

　　嵌套选择器 (类似于后代选择器)




    
    Title
    




    
        三层嵌套

　　伪类选择器

　　a和input 标签的特有操作

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00　　/*被操作过的对象会变色*/
} 

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF   /*光标点击会标色,移走则选中*/
}

/*input输入框获取焦点时样式(获取光标)*/
input:focus {
  outline: none;
  background-color: #eee; / background-color:rgba(10,100,101,0.2);(背景也可以用rgba,被透明化.骚操作.)
}

　　伪元素选择器

　　　first-letter　　标签:first-letter {属性}

　　　常用来给标签内的第一个元素设置格式:


"zh-CN">

    "UTF-8">
    Title
    



"d1">
  我是好人

　　before　　标签:before {属性; }

　　在标签内的元素前进行操作

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1:before {
        content:"*";
        color:red;
        }
　　　　

    style>
head>

<body>
<div id="d1">
  我是好人
div>

body>
html>

　　after　　标签:after {属性;}

　　　　在标签的元素之后进行操作,插入内容

    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1:before {
        content:"*";
        color:red;
        }
        #d1:after {
        content:"[*]";
        color:green;
        }
    style>
head>

<body>
<div id="d1">
  我是好人
div>

body>
html>

css选择器的优先级

　　选择器相同时,后面的标签优先级高(后面的覆盖前面的)

　　选择器不同时:

　　继承的权重为 0　(指嵌套在父标签内的标签)

　　注意:内联样式是指,直接在标签内通过style进行属性操作例:

红色

　　在计算选择器优先级时,先看选择器的优先级,优先级别更高的选择器,优先级更高,在优先级别相同时

　　权重和大的,优先级别更高.

　　此外 ,还可以通过添加import方式来强制让样式生效,不推荐使用,若过多使用,回事样式文件混乱不易维护(在

　　属性后加 !import;)

css属性相关

　　高和宽

　　只有块级标签才能设置(行内标签只能依靠行元内元素的宽和高,块级标签可以独占一行,因此可以设置.)

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div {
            height :200px;
            weight:205px;
            background-color:red;
            }
        span {
            height :200px;
            weight:205px;
            background-color:green;
            }   
    style>
head>

<body>
<div id="d1">
  我是好人
div>
<span>
    我也是好人
span>

body>
html>

　　字体属性

　　　　font-family可以把多个字体名称作为一个回退系统来保存.如果浏览器不支持第一个字体,则会尝试下

　　　　一个.浏览器会使用它可识别的第一个值.(若全都不支持,则会选择浏览器系统默认字体)

body {
    font-family:微软雅黑,宋体,Arial}

　　字体大小　　font-size

p {
    font-size:15px;
    }

　　如果设置成inherit表示继承父元素的字体大小值.

　　字重(粗细)

    <title>Titletitle>
    <style>
        div {
            font-weight:bold;   
            height :200px;
            weight:205px;
            background-color:red;
            }
    style>
head>

<body>
<div id="d1">
  我是好人
div>

body>
html>

　　文本颜色

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div {
            font-weight:bold;
            color:red;  
            }
        span {
            background-color:red;
            color:#FFFFFF;  
　　　　　　　}

    style>
head>

<body>
<div id="d1">
    我是好人
div>
<span>
    我也是好人
span>
<div id="d2">
    彼此彼此
div>

body>
html>

　　color :rgba(255,255,255,0.4)　　a指的是透明度比率,取值范围是0~1 ,是在rgb上进行属性设置.

　文字属性

　　文字对齐

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div {
            font-weight:bold;
            text-align:center;
            color:red;}
        span {
            background-color:red;
            text-align:right;　　
            color:#FFFFFF;}
        #d2 {
            text-align:right;
            color:rgba(0,255,0,0.7);}
    style>
head>

<body>
<div id="d1">
    我是好人
div>
<span>
    我也是好人
span>
<div id="d2">
    彼此彼此
div>

body>
html>

　　文字装饰

　　注意:none指的是消去下划线 ; line-through 穿过元素,类似于删除形式 ; overline 在元素上方划线.

　　首行缩进　　text-indent

　　将段落的第一行缩进单位是像素

p {
    text-indent:32px
    }

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url(1.jpg);
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

　　鼠标滚动背景不动的例子

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;
            background-attachment: fixed;　　
        }
        .d1 {
            height: 500px;
            b.ackground-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    style>
head>
<body>
    <div class="d1">div>
    <div class="box">div>
    <div class="d2">div>
    <div class="d3">div>
body>
html>

边框　　

　　边框属性

border-width
border-style
border-color

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;

　　通常使用简写方式：

#i1 {
  border: 2px solid red;
}

　　边框样式:

　　border-radius

　　用这个属性能实现圆角边框的效果.

　　将border-radius设置为长或高的一半即可得到一个圆形.

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>圆形title>
    <style>
        div {
            width:150px;
            height:150px;
            border:5px solid green;
            border-radius: 50%;
        }
    style>
head>
<body>
<div class="d1">

div>

body>
html>

　　display属性　　用于控制HTML元素的显示效果.

　　display:block　　可以让行级标签拥有块级标签的特性,如:宽度高度等.

　　display:inline-block 既可以在一行显示,又拥有宽度和高度.

盒子模型

　　content 指的是内容本身的长宽 ; padding指的是内容与边框之间的区域 ,也可以叫内边距 ;

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>圆形title>
    <style>
        div {
            width:150px;
            height:150px;
            border:5px solid green;
            border-radius: 50%;
            margin:20px;
            padding-right:30px;
            padding-left
                 
                                                                                                                    
                         云服务器
                                             
                         GPU云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               css引入css
                                                                                                           css
                                                                                                           _CSS
                                                                                                           css88

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1855.html

[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
简单易懂的CSS Modules

摘要：结果是选手获胜，名为的元素，最终的值为。而合理的命名约定，的确是组织代码的有效策略。它们会再由转换为适当的组合。虽然本文为了严谨，结果写了相当长的篇幅，但希望你读过之后，还能觉得是简单易懂的。不要误会，CSS Modules可不是在说css模块化这个好像在某些地方见过的词，它其实是特指一种近期才出现的技术手段。什么技术手段呢？请待后文说明。层叠样式表我们知道，css的全名叫做层...

chunquedong 2019-08-30 12:58 评论0 收藏0
CSS Modules实践

摘要：能最大化地结合现有生态预处理器后处理器等和模块化能力，几乎零学习成本。编码相关的所有样式上例中打印的结果是注意到是按照自动生成的名。实践手动引用渲染结果使用可以实现使用属性自动加载模块。文章同步于Github Pines-Cheng/blog 随着前端这几年的风生水起，CSS作为前端的三剑客之一，各种技术方案也是层出不穷。从CSS prepocessor（SASS、LESS、Styl...

hankkin 2019-08-29 13:00 评论0 收藏0
【译】编写更好的CSS必备的40个工具

摘要：一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的，并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站，并想要网站正常运行在低版本的上，可以考虑。众所周知，CSS是非常棒的，它使网站看起来很漂亮，可以为网站添加动画，并让呈现和内容分离。去了解CSS的一切是非常难做到的，它只会变得更加困难,因为我...

moven_j 2019-08-28 18:09 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
CSS Modules详解及React中实践

摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

wemall 2019-08-30 15:45 评论0 收藏0